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

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

@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!

@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 🙂

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!

@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

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.

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 

Con el 49 no funcionó pero si al 48%

Mil gracias!