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