Avisos
Vaciar todo

[Resuelto] Módulo tienda en 1 columna en móvil  

 
David
 David
Usuario experto

Muy buenas,

 

¿Cómo podría configurar el módulo tienda de DIVI para que muestre los artículos en 1 columna en el móvil? 

https://urika.es/categoria-producto/bolsos-de-cuero/

De forma que en PC y tablet se visualicen 2 columnas, y en móvil 1.

 

He probado a insertar un módulo tienda visible solo en el móvil, con 1 columna en el layout, pero no lo respeta y siempre lo muestra en 2 columnas.

 

¡Gracias como siempre!

Contenido solo visible a usuarios registrados

Respondido : 26/12/2020 7:56 pm
Bulmaro
 Bulmaro
Soporte CMS Webempresa Moderator

Hola David, 

El siguiente código debería servirte:

@media screen and (max-width: 600px) {
.woocommerce ul.products li.product:nth-child(n) {
float: none !important;
width: 100% !important;
}
}

Si no te funciona revisa si eliminando la caché de Autoptimize corrige el problema o revisa si has insertado CSS personalizado, veo que hay una regla de CSS en tu código que podría estar impidiendo que el código anterior funcione: 

@media screen and (max-width: 980px) {
.et-db #et-boc .et-l .product{
width: 49% !important;
}
}

Saludos

Respondido : 26/12/2020 8:56 pm

David
 David
Usuario experto

@bulmaro-webempresa

 

Muy buenas!

 

He probado el código que me dices (y purgado la cache de autoptimize) y efectivamente, tiene pinta de que no funciona por el código que me describes. Pero he revisado en mi CSS adicional y en integración de DIVI, así como buscado en el CSS de la página y algún módulo de código, y no consigo dar con el origen. ¿Alguna forma de encontrar la ubicación de un código CSS?

 

Gracias!

Respondido : 26/12/2020 9:40 pm
Bulmaro
 Bulmaro
Soporte CMS Webempresa Moderator

@urika1995gmail-com

Hola David, 

Creo que el problema viene de que estás usando una plantilla personalizada para las categorías de producto, lo que puedes hacer es, desde tu cuenta de cPanel -> Administrador de archivos, editar el archivo style-cpt.dev.css ubicado en /public_html/raiz_de_tu_web/wp-content/themes/divi/ y buscar el siguiente bloque de código:

@media all and (max-width: 980px) {
.et-db #et-boc .et-l .et_pb_shop ul.products.columns-1 li.product,
.et-db #et-boc .et-l .et_pb_shop ul.products.columns-2 li.product,
.et-db #et-boc .et-l .et_pb_shop ul.products.columns-3 li.product,
.et-db #et-boc .et-l .et_pb_shop ul.products.columns-4 li.product,
.et-db #et-boc .et-l .et_pb_shop ul.products.columns-5 li.product,
.et-db #et-boc .et-l .et_pb_shop ul.products.columns-6 li.product,
.et-db #et-boc .et-l .et_pb_wc_related_products ul.products.columns-1 li.product,
.et-db #et-boc .et-l .et_pb_wc_related_products ul.products.columns-2 li.product,
.et-db #et-boc .et-l .et_pb_wc_related_products ul.products.columns-3 li.product,
.et-db #et-boc .et-l .et_pb_wc_related_products ul.products.columns-4 li.product,
.et-db #et-boc .et-l .et_pb_wc_related_products ul.products.columns-5 li.product,
.et-db #et-boc .et-l .et_pb_wc_related_products ul.products.columns-6 li.product,
.et-db #et-boc .et-l .et_pb_wc_upsells ul.products.columns-1 li.product,
.et-db #et-boc .et-l .et_pb_wc_upsells ul.products.columns-2 li.product,
.et-db #et-boc .et-l .et_pb_wc_upsells ul.products.columns-3 li.product,
.et-db #et-boc .et-l .et_pb_wc_upsells ul.products.columns-4 li.product,
.et-db #et-boc .et-l .et_pb_wc_upsells ul.products.columns-5 li.product,
.et-db #et-boc .et-l .et_pb_wc_upsells ul.products.columns-6 li.product {
width: 48% !important;
margin-right: 4% !important; }

El cual tendrás que modificar por:

@media all and (max-width: 980px) {
.et-db #et-boc .et-l .et_pb_shop ul.products.columns-1 li.product,
.et-db #et-boc .et-l .et_pb_shop ul.products.columns-2 li.product,
.et-db #et-boc .et-l .et_pb_shop ul.products.columns-3 li.product,
.et-db #et-boc .et-l .et_pb_shop ul.products.columns-4 li.product,
.et-db #et-boc .et-l .et_pb_shop ul.products.columns-5 li.product,
.et-db #et-boc .et-l .et_pb_shop ul.products.columns-6 li.product,
.et-db #et-boc .et-l .et_pb_wc_related_products ul.products.columns-1 li.product,
.et-db #et-boc .et-l .et_pb_wc_related_products ul.products.columns-2 li.product,
.et-db #et-boc .et-l .et_pb_wc_related_products ul.products.columns-3 li.product,
.et-db #et-boc .et-l .et_pb_wc_related_products ul.products.columns-4 li.product,
.et-db #et-boc .et-l .et_pb_wc_related_products ul.products.columns-5 li.product,
.et-db #et-boc .et-l .et_pb_wc_related_products ul.products.columns-6 li.product,
.et-db #et-boc .et-l .et_pb_wc_upsells ul.products.columns-1 li.product,
.et-db #et-boc .et-l .et_pb_wc_upsells ul.products.columns-2 li.product,
.et-db #et-boc .et-l .et_pb_wc_upsells ul.products.columns-3 li.product,
.et-db #et-boc .et-l .et_pb_wc_upsells ul.products.columns-4 li.product,
.et-db #et-boc .et-l .et_pb_wc_upsells ul.products.columns-5 li.product,
.et-db #et-boc .et-l .et_pb_wc_upsells ul.products.columns-6 li.product {
width: 48%;
margin-right: 4% !important; }

Es un archivo muy grande por lo que te sugiero descargarlo a tu PC y a través de un editor como sublime-text buscar dicha cadena, en el explorador web veo que el bloque de código inicia en la fila 14569, aunque no estoy seguro de que Sublime Text u otro editor te la muestren en esa misma fila, aunque podría ser que sí, lo cual facilitaría mucho la edición. 

Saludos 🙂

Respondido : 26/12/2020 10:22 pm

David
 David
Usuario experto

Muy buenas,

 

He seguido tus pasos y, efectivamente, estaba justo en la línea que me dijiste.

¡Problema solucionado!

 

Para la próxima vez, ¿cómo puedo encontrar el origen del css que me interese buscar? Te pregunto sin saber si se necesita de un mayor conocimiento, en ese caso seguiré aprendiendo.

 

Gracias como siempre!

Respondido : 27/12/2020 2:57 am
Bulmaro
 Bulmaro
Soporte CMS Webempresa Moderator

@urika1995gmail-com

Hola David, 

Excelente, me alegra saber que hallas solucionado el problema. Puedes usar la herramienta de inspección de elementos y estilos CSS del navegador de tu elección, por ejemplo, si utilizas Firefox -> Examine_and_edit_CSS

Saludos

Respondido : 27/12/2020 3:29 am

David
 David
Usuario experto

Muy buenas,

 

Reabro el tema porque me he dado cuenta de que ahora, si desde el móvil vas expandiendo la pantalla hacia tablet, y luego hacia desktop los productos pasan a 3 columnas desalineadas en lugar de mantenerse en 2. Adjunto foto.

3columnasEnvezdedos

 

Respondido : 27/12/2020 4:15 am
Argenis
 Argenis
Soporte CMS Webempresa Moderator

Hola David,

El problema esta en que a esas resoluciones no se esta aplicando el css especifico y la resolución es entre 768px y 980px, Verifica agregando el siguiente código css:

@media screen and (min-width: 768px) and (max-width: 980px) {
.et-db #et-boc .et-l .et_pb_shop ul.products.columns-1 li.product, .et-db #et-boc .et-l .et_pb_shop ul.products.columns-2 li.product, .et-db #et-boc .et-l .et_pb_shop ul.products.columns-3 li.product, .et-db #et-boc .et-l .et_pb_shop ul.products.columns-4 li.product, .et-db #et-boc .et-l .et_pb_shop ul.products.columns-5 li.product, .et-db #et-boc .et-l .et_pb_shop ul.products.columns-6 li.product, .et-db #et-boc .et-l .et_pb_wc_related_products ul.products.columns-1 li.product, .et-db #et-boc .et-l .et_pb_wc_related_products ul.products.columns-2 li.product, .et-db #et-boc .et-l .et_pb_wc_related_products ul.products.columns-3 li.product, .et-db #et-boc .et-l .et_pb_wc_related_products ul.products.columns-4 li.product, .et-db #et-boc .et-l .et_pb_wc_related_products ul.products.columns-5 li.product, .et-db #et-boc .et-l .et_pb_wc_related_products ul.products.columns-6 li.product, .et-db #et-boc .et-l .et_pb_wc_upsells ul.products.columns-1 li.product, .et-db #et-boc .et-l .et_pb_wc_upsells ul.products.columns-2 li.product, .et-db #et-boc .et-l .et_pb_wc_upsells ul.products.columns-3 li.product, .et-db #et-boc .et-l .et_pb_wc_upsells ul.products.columns-4 li.product, .et-db #et-boc .et-l .et_pb_wc_upsells ul.products.columns-5 li.product, .et-db #et-boc .et-l .et_pb_wc_upsells ul.products.columns-6 li.product {
width: 49% !important;
margin-right: 2% !important;
}
}

Un saludo 

Respondido : 27/12/2020 11:36 am

David
 David
Usuario experto

Con el 49 no funcionó pero si al 48%

 

Mil gracias!

Respondido : 27/12/2020 1:15 pm