Si utilizar Divi para construir páginas web puede ser que te hayas encontrado con el problema. Creas una fila de dos o cuatro columnas y al verla en móvil el contenido se expande y por defecto todas las columnas ocupan el 100% de la pantalla. En este post te voy a enseñar como crear filas dos columnas en movil con Divi. De esta forma podrás controlar como se muestra el contenido en todos los dispositivos y tendrás un extra de personalización y control en tus proyectos.
También te podría interesar este post: Mas columnas con Divi. Vídeo tutorial con código descargable.
¿Para que modificar el tamaño de columnas en Divi?
Esta solución tiene muchas aplicaciones prácticas. Por ejemplo, para crear un menú en el generador de temas, crear una barra fija en tu web, crear columnas donde aparezca un icono. O bien simplemente porque quieres mostrar en móvil una imagen al lado de un texto.
Ejemplo 1:
Dos columnas en movil con Divi, con una imagen a la izquierda y un texto a la derecha.
Columnas por defecto en tablets y móvil con Divi
Resultado.
Mostraremos en tablet las dos columnas al 50% mientras que en móvil mostraremos la primera al 20% y la segunda al 80%
¿Que necesitamos para crear filas de dos columnas en movil con Divi?
1. Añadir una clase a la fila
Primero vamos a añadir una clase a la fila. No importa que nombre le asignes. Yo he elegido la clase no-expanded
2. Añadir el siguiente CSS en nuestra web
El siguiente paso es añadir este código CSS en nuestra página de Divi. En la parte inferior te explico cada una de las líneas.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
@media(max-width:980px){ .no-expanded > .et_pb_row:after{ display:none; } .no-expanded > .et_pb_row{ display:flex; flex-wrap:wrap ; justify-content:space-between; border:1px solid red; } .no-expanded .et_pb_column{ width:45%; border:1px solid blue; } } @media(max-width:640px){ .no-expanded .et_pb_column:nth-child(1){ width:30% !important; } .no-expanded .et_pb_column:nth-child(2){ width:65%; } } |
Copia este código y añádelo a los ajustes de tu página, así:
Te explico un par de cosas importantes de este código. En el tenemos dos media queries. Sirven para controlar que propiedad de CSS vamos a aplicar cuando la pantalla sea tenga una ancho de 980px en el primer caso y 680px en el segundo caso. ¿Porque 980px y 680px? Porque son las anchuras en cuales divi expande las columnas automáticamente.
Además como ves vamos a utilizar la propiedad :nth-child(1), :nth-child(2), etc… Con ella aplicamos propiedades CSS a la columna 1, columna 2, etc…
Podemos añadir tantas media queries como queramos. Imagínate que queremos que las columnas en móviles pequeños vuelvan a ocupar el 100% de la pantalla. Tendríamos un código como este donde añadimos una media querie para dispositivos menores de 410px
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
@media(max-width:980px){ .no-expanded > .et_pb_row:after{ display:none; } .no-expanded > .et_pb_row{ display:flex; flex-wrap:wrap ; justify-content:space-between; border:1px solid red; } .no-expanded .et_pb_column{ width:45%; border:1px solid blue; } } @media(max-width:640px){ .no-expanded .et_pb_column:nth-child(1){ width:30% !important; } .no-expanded .et_pb_column:nth-child(2){ width:65% !important; } } @media(max-width:410px){ .no-expanded .et_pb_column:nth-child(1){ width:100% !important; } .no-expanded .et_pb_column:nth-child(2){ width:100%; } } |
Espero que te haya gustado este post y puedas utilizarlo en tus proyectos.
0 comentarios
Trackbacks/Pingbacks