Seleccionar página

Una de las cosas que menos me gusta de Divi son pequeños detalles que le faltan sobre todo en la versión móvil, le falta aún bastante por mejorar (aparte de temas de blog, menú superior… etc.), por suerte existen CSS y todo se puede arreglar..

El problema de las Filas y columnas en Divi …

Muchas veces queremos hacer  un diseño donde se alteren en las columnas… dos columnas una con una imagen y otra con un texto… y en la siguiente fila al revés… un texto y luego una imagen…

En la versión PC queda bien, el problema viene con la versión responsive en el móvil, ya que pone por orden… ósea nos mostrar dos imágenes seguidas.. Mal hecho…

Cómo ajustar el orden de columnas de Divi en dispositivos móviles?

Como solucionarlo? Busca la fila que quieras cambiar el orden:

  • Primero vete a la fila (No la sección… la filaaa) : FILA  configuración > Avanzado y añade en clase Css: lo siguiente: custom_row
  • Coge la primera columna y añade en clases de CSS: first-on-mobile
  • Coge la segunda columna y añade en clases de css: second-on-mobile

Para arreglar esto debemos de añadir en el editor de código css él  lo siguiente:

/*invertit*/

@media all and (max-width: 980px) {/*** wrap row in a flex box ***/.custom_row {  display: -webkit-box;  display: -moz-box;  display: -ms-flexbox;  display: -webkit-flex;  display: flex;-webkit-flex-wrap: wrap; /* Safari 6.1+ */flex-wrap: wrap;}
/*** custom classes that will designate the order of columns in the flex box row ***/

.first-on-mobile {-webkit-order: 1;order: 1;}

.second-on-mobile {-webkit-order: 2;order: 2;}

/*** add margin to last column ***/

.custom_row:last-child .et_pb_column:last-child {margin-bottom: 30px;}}

Articulo By DIVI con amor

Articulos relacionados
Optimizar imagenes – Carga Diferida

En que consiste la carga diferida? Permite posponer la carga de las imagenes y videos, principalmente aquellas imagenes que no Read more

Aumentar el tamaño del logo en Divi [Versión Móvil]

Un pequeño problema que surge a la hora de usar Divi es que en la versión móvil el logo se Read more

Crear varias columnas en DIVI [Versión Móvil]

Uno de los inconvenientes de la versión responsive de cualquier tema de WordPress en el móvil es que si en Read more

Boton de Añadir al carrito en divi [Woocommerce]

Divi es una de las mejores formas de crear páginas web bonitas y fáciles de diseñar si es verdad que Read more