Diseño de cuadrícula 2 columnas en móviles con tema Classic

antonio92

¡Hola a todos!

Estoy intentando modificar el tema Classic para que los productos se muestren en dos columnas en móviles, en lugar de la vista apilada de una sola columna. He estado haciendo pruebas en mi custom.css, pero me encuentro con el problema de que si los productos tienen descripciones o títulos de diferente longitud, las filas quedan totalmente desiguales y se ve bastante feo. Parece que no se estiran bien las cajas.

Aquí tenéis el CSS que estoy usando en themes/classic/assets/css/custom.css para intentar forzar las dos columnas:

@media (max-width: 767px) {
  #js-product-list .products {
    display: flex;
    flex-wrap: wrap;
  }
  #js-product-list .product-miniature {
    width: 50%;
    padding: 0 5px;
    box-sizing: border-box;
  }

¿Alguna idea de cómo puedo conseguir que las cajas se alineen bien y se estiren a la misma altura en cada fila?

nuria_tienda

Hola @antonio92.

Esa es una buena iniciativa, la vista de una columna en móvil desperdicia mucho espacio. Con el Classic y PrestaShop 1.7.3.4 (asumo que esa es la versión, si no corrígeme), la estructura puede ser un poco rígida.

El problema que describes con las alturas desiguales es clásico de flexbox cuando los ítems dentro de las cajas tienen contenido variable y no se aplica un align-items: stretch al contenedor o cuando los propios .product-miniature no tienen un contenedor flexible interno que los estire. También, a veces, los márgenes o paddings internos de los elementos del producto (imagen, nombre, precio) pueden afectar.

¿Has revisado si hay estilos que fijen una altura mínima o máxima al .product-miniature o a los elementos internos? A veces el min-height por defecto del tema puede impedir que se estiren correctamente.

Milo

¡Hola @antonio92!

Entiendo perfectamente tu frustración con las alturas desiguales en la cuadrícula de productos en móvil. Es un problema común cuando se pasa de una columna a dos con flexbox si no se manejan bien las propiedades. Para PrestaShop 1.7.3.4 y el tema Classic, la solución suele pasar por asegurar que el contenedor flex esté configurado para estirar sus ítems y que estos no tengan restricciones de altura que lo impidan.

Tu código va por buen camino, pero faltan dos cosas clave: justify-content para distribuir bien el espacio y, más importante, align-items: stretch en el contenedor padre de los productos. Esto hará que todos los elementos product-miniature en la misma fila tengan la misma altura que el elemento más alto de esa fila.

Prueba a reemplazar tu snippet en themes/classic/assets/css/custom.css con este:

@media (max-width: 767px) {
  #js-product-list .products {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between; /* Distribuye espacio entre ítems */
    align-items: stretch; /* ESTO es crucial para igualar alturas */
  }
  #js-product-list .product-miniature {
    width: calc(50% - 10px); /* Ajusta para dejar un margen entre columnas */
    margin-bottom: 20px; /* Espacio entre filas */

Explicación de los cambios:

justify-content: space-between;: Asegura que haya un espacio equitativo entre las dos columnas y que se peguen a los bordes si no hay más de dos. Si hay un número impar de productos en la última fila, esto puede centrar el último ítem.
align-items: stretch;: Esta es la propiedad clave. Hace que los product-miniature dentro de cada fila flexible se estiren para ocupar la misma altura que el más alto. Esto resuelve directamente el problema de las filas dentadas.
width: calc(50% - 10px);: Ajusta el ancho para dejar un margen de 20px entre las columnas (10px a cada lado). Puedes ajustar 10px según el espaciado deseado.
margin-bottom: 20px;: Añade un espacio entre las filas para una mejor legibilidad.
#js-product-list .product-miniature .thumbnail-container: He añadido un estilo para este contenedor interno para que también sea flexible y estire su altura al 100%.
#js-product-list .product-miniature .product-description: Al darle flex-grow: 1 a la descripción, si existe, se asegura que ocupe todo el espacio disponible, ayudando al estiramiento general.

Recuerda borrar la caché del navegador y de PrestaShop después de aplicar los cambios para verlos reflejados.

antonio92

¡@Milo, muchísimas gracias! El código que has proporcionado ha funcionado perfectamente. Con align-items: stretch y los ajustes en el thumbnail-container, ahora los productos se ven ordenados en dos columnas con las alturas igualadas, incluso con títulos o descripciones largas. ¡Justo lo que necesitaba!

¡Un placer contar con vuestra ayuda!