[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:

Link a post de foro, solo visible a usuarios registrados
Link a post de foro, solo visible a usuarios registrados

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

Link a post de foro, solo visible a usuarios registrados

Claro, gracias.

Es la siguiente:

http://mannagel-cp47.wordpresstemporal.com/mannagelats/los-mejores-helados/?et_fb=1&PageSpeed=off

Respondido : 13/07/2020 3:03 pm
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

Link a post de foro, solo visible a usuarios registrados

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.

Link a post de foro, solo visible a usuarios registrados

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

Link a post de foro, solo visible a usuarios registrados

Comprueba si con esto logras modificar lo que necesitas.

Un Saludo

 

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

Link a post de foro, solo visible a usuarios registrados

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.

Link a post de foro, solo visible a usuarios registrados
Link a post de foro, solo visible a usuarios registrados

 

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

Link a post de foro, solo visible a usuarios registrados

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

Link a post de foro, solo visible a usuarios registrados

@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

Link a post de foro, solo visible a usuarios registrados

Verifica si con esto logras modificar lo que necesitas

Un Saludo

 

 

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

Nada Link a post de foro, solo visible a usuarios registrados

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 Marreros Guzman
 Jhon Marreros Guzman
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.

Si nuestra ayuda te sirve déjanos tu testimonio y mejora así el posicionamiento de tu web:
Enviar mi Testimonio
¡Gracias!.

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

Lo logré!

Gracias

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

Hola

Que bueno que te funcionó.

Saludos.

Si nuestra ayuda te sirve déjanos tu testimonio y mejora así el posicionamiento de tu web:
Enviar mi Testimonio
¡Gracias!.

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

Link a post de foro, solo visible a usuarios registrados

muchas gracias. Lo había logrado ya con la última fórmula que me había pasado Link a post de foro, solo visible a usuarios registrados.

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

 

Respondido : 13/07/2020 9:51 pm
Argenis Paz
 Argenis Paz
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

Por favor Iniciar Sesión o Registro