Ya estamos aquí de nuevo para solucionar una limitación de DIVI, que como ya sabemos todos, es una gran plantilla para wordpres, pero que tiene sus pequeños inconvenientes.
Cuando por ejemplo, tenemos una sección con 4 columnas, en versión responsive, una vez llegado a la resolución más pequeña, la de móvil, todo se transforma en una columna. Pero esto a veces no es práctico, por ejemplo cuando tenemos una sección con 4 columnas que son iconos. En móvil es muy incómodo tener los 4 iconos uno debajo de otros. ¿Cómo lo solucionamos? pues como casi siempre, con CSS.
Paso 1. Generamos el siguiente CSS en nuestra plantilla general:
@media only screen and (max-width: 479px) { .dos-columnas .et_pb_column { width: 50%!important; } }
Y luego aplicamos esta Clase CSS en nuestra FILA de esta manera:.
Como veis en este caso, las columnas quedan ajustadas de dos en dos, que es lo que queremos en este caso.
Gracias, ha sido de gan ayuda!!
Hola,
Excelente síntesis del código.
Saludos!
Gracias!!! 1 hora hasta que encontré tu solución, yo necesitaba 5 iconos en fila y he modificado el código a 20% y perfecto!! pero me sale una bendita blanca por debajo, ando peleándome con ella 😉
Gracias de nuevo
¿Cómo puedo hacer para que tengan dos tamaños diferentes?
Hola Erick, a raíz de tu pregunta he creado una nueva entrada en el bloc, espero que encuentres ahí la respuesta 🙂
https://servisplus.es/plugins-wordpress/hacer-dos-columnas-de-diferente-tamano-en-movil-con-divi/
Saludos.
Hola, muy buen post! Me gustaría saber cómo hacer para forzar las mismas columnas en mobile para tablet. Gracias!
Hola Víctor,
creo que sería simplemente aumentar el valor de la resolución (max-width: 479px) a los pixels de una tablet. El problema es que hay tablets con tanta resolución que podría confundirse con un PC.
La idea sería ir haciendo pruebas con esa resolución.