Buenas tardes, estoy intentando optimizar la vista de mi tienda en dispositivos móviles con PrestaShop 1.7.2.5. En el tema Classic, por defecto, los productos en las listas (categorías, búsquedas) se apilan en una sola columna.
Quería cambiar esto a una cuadrícula de dos columnas para aprovechar mejor el espacio y que los usuarios no tengan que desplazarse tanto. He probado a añadir un CSS en themes/classic/assets/css/custom.css usando flexbox, pero me encuentro con el problema típico de que las tarjetas de producto no tienen la misma altura si el título o la descripción son diferentes, y la cuadrícula queda muy desordenada. Parece un problema de flex-wrap y la alineación.
Este es el código que he intentado:
@media (max-width: 767px) {
.product-list .products {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.product-list .product-miniature {
flex: 0 0 calc(50% - 10px); /* Intentando dos columnas con espacio */
max-width: calc(50% - 10px);
margin-bottom: 20px; /* Para separar filas */
¿Alguien ha conseguido hacer esto de forma limpia sin que las alturas de las tarjetas arruinen la estética? ¿Hay alguna forma de forzar las alturas o algún truco CSS?