Avisos
Vaciar todo

[Resuelto] número de columnas en versión móvil  

 
Carlos
 Carlos
Usuario eminente

Hola, Buenos días.

Estoy intentando que cuatro imágenes en una fila se vean como dos columnas en la versión para móvil, pero aún haciendo lo que leo en foros (añadir algún código CCS), no logro hacerlo.

muestro pantallazos:

pantallazo1
pantallazo 2

El código que escribo es:

@media only screen and (max-width: 479px) {
.dos-columnas .et_pb_column { width: 50%!important; }
}

y añado DOS-COLUMNAS en el CCS de cada imagen, pero nada.

Pienso que seguramente estoy colocando el código fuera de lugar.

Alguna sugerencia.

Respondido : 13/07/2020 11:49 am
Karen Rios
 Karen Rios
Soporte CMS Webempresa Moderator

Hola Carlos, 

¿Puedes enviarnos la URL de tu consulta? de esta forma podemos verificar con mayor detalle lo que nos comentas.

Si es posible enviamos la URL de la sección que deseas colocar en dos columnas.

Un Saludo

Respondido : 13/07/2020 2:31 pm
Carlos
 Carlos
Usuario eminente
Carlos
 Carlos
Usuario eminente
Karen Rios
 Karen Rios
Soporte CMS Webempresa Moderator

Hola Carles,

Comprueba añadir la siguiente linea de código en la configuración de tu columna.

display: flex;

Para ello editar la sección donde tienes las columnas que deseas ajustar y pulsa sobre la opción de sus configuraciones

Screenshot(358)

Dentro de esto ubica la pestaña Avanzado -> CSS personalizado y en la opción de Elemento principal añade la linea de código.

Screenshot(358)

Guarda los cambios y actualiza, el resultado debe ser algo como esto

Screenshot(358)

Comprueba si con esto logras modificar lo que necesitas.

Un Saludo

 

Respondido : 13/07/2020 3:28 pm
Carlos
 Carlos
Usuario eminente

@karen

Aparentemente funciona en tablet, pero no en teléfono.

De echo, al darle al visualizador que modela la visión de teléfono, comienza agrupando las cuatro columnas en dos, pero inmediatamente vuelve a la única columna vertical.

pantallazo 2 1a
pantallazo1 1a

 

En los pantallazos que acompaño se ve en un momento que se agrupan en dos columnas, pero inmediatamente se recomponen en una única columna.

Respondido : 13/07/2020 4:52 pm
Karen Rios
 Karen Rios
Soporte CMS Webempresa Moderator

Hola Carlos,

Entiendo puedes probar añadiendo la siguiente configuración.

En la columna que tienes ahora agregada las imágenes abre su configuración y ve a la pestaña avanzado ID y Clases CSS, dentro de esta debes añadir a siguiente clase two-columns

Screenshot(358)

Una vez lo agregues guarda los cambios

Ahora ingresa a las opciones de Divi -> Opciones del tema y añade el siguiente código CSS en el apartado CSS personalizado

Screenshot(358)
@media only screen and (max-width: 486) {
.two-columns .et_pb_column {
width: 50%!important;
}
}

Guarda los cambios y comprueba si logras ubicar tus columnas móviles en dos, el resultado debe ser algo como como este

Screenshot(358)

Verifica si con esto logras modificar lo que necesitas

Un Saludo

 

 

Respondido : 13/07/2020 5:41 pm
Carlos
 Carlos
Usuario eminente

Nada @karen

Sigue intentando mostrar dos columnas, pero inmediatamente se convierte en una columna.

Eso en es en el visualizador modo teléfono del ordenador. En el teléfono ni siquiera eso logra. (estoy mirándolo en un iphone X)

Respondido : 13/07/2020 5:56 pm
Carlos
 Carlos
Usuario eminente

Acabo de chequearlo en un Samsung viejo y tampoco se ve en dos columnas.

Respondido : 13/07/2020 6:02 pm
Jhon
 Jhon
Soporte CMS Webempresa Moderator

Hola

Prueba agregando el siguiente código CSS:

Agrega este código a nivel general, a nivel de tu child-theme en el style.css, o desde Personalización de WordPress o desde la opciones generales de Divi para agregar código CSS.

@media (max-width: 480px){
.entry-content .et_pb_row_4col > div:nth-child(even){
margin-left: 4%!important;
}

.entry-content .et_pb_row_4col > div{
width: 46%!important;
}
}

Saludos.

Respondido : 13/07/2020 6:34 pm
Carlos
 Carlos
Usuario eminente

Lo logré!

Gracias

Respondido : 13/07/2020 6:36 pm
Jhon
 Jhon
Soporte CMS Webempresa Moderator

Hola

Que bueno que te funcionó.

Saludos.

Respondido : 13/07/2020 6:44 pm
Carlos
 Carlos
Usuario eminente

@jmarreros

muchas gracias. Lo había logrado ya con la última fórmula que me había pasado @Karen.

Un abrazo y gracias. Ya tengo una nueva consulta, pero será maána. Buenas noches 🙂

 

Respondido : 13/07/2020 9:51 pm
Argenis
 Argenis
Soporte CMS Webempresa Moderator

Hola Carlos,

Fantástico, estaremos al pendiente para poder ayudarte con esa nueva consulta, recuerda elaborarla en un tema nuevo.

Saludos 🖐️ 

 

Respondido : 13/07/2020 9:58 pm