Si utiliza Hostinger Website Builder para crear una tienda en línea, habrá notado que, de forma predeterminada, los productos se muestran en una sola columna en la versión móvil de su sitio.

Si desea cambiar eso, siga los pasos a continuación 👇

Copia el código

El siguiente código está destinado a mostrar productos en dos columnas en dispositivos móviles:

<style>
    @media screen and (min-width: 301px) and (max-width: 920px) {
        .block-product-list__content {
            grid-template-columns: repeat(2, 1fr) !important;
            gap: 5px !important;
            min-width: 300px;
        }
        .product-list-item__price-wrapper *,
        .product-list-item__title {
            font-size: 14px !important;
        }
        .product-list-item__button{
            padding: 5px !important;
        }
        .product-list-item__price-wrapper{
            flex-direction: column;
        }
        .product-list-item__price-content{
            justify-content: center;
        }
    }
    @media screen and (max-width: 300px) {
        .block-product-list__content {
            grid-template-columns: repeat(2, 1fr) !important;
        }
    }
</style>

Si deseas mostrar productos en tres columnas en el móvil, debes reemplazar 2 por 3 en esta línea en particular:

grid-template-columns: repeat(2, 1fr) !important;

NOTA

Hay dos líneas de este tipo en el código: al principio y al final; debe editar solo la primera línea; es decir, para mostrar productos en tres columnas en dispositivos móviles, el código debería verse así:

<style>
    @media screen and (min-width: 301px) and (max-width: 920px) {
        .block-product-list__content {
            grid-template-columns: repeat(3, 1fr) !important;
            gap: 5px !important;
            min-width: 300px;
        }
        .product-list-item__price-wrapper *,
        .product-list-item__title {
            font-size: 14px !important;
        }
        .product-list-item__button{
            padding: 5px !important;
        }
        .product-list-item__price-wrapper{
            flex-direction: column;
        }
        .product-list-item__price-content{
            justify-content: center;
        }
    }
    @media screen and (max-width: 300px) {
        .block-product-list__content {
            grid-template-columns: repeat(2, 1fr) !important;
        }
    }
</style>

Esto significa lo siguiente:

Si el ancho de la pantalla de un dispositivo móvil es de 301 PX a 920 PX*, los productos se muestran en tres columnas.

En caso de que el ancho de la pantalla de un dispositivo móvil sea de 300 PX o menos, los productos se muestran en dos columnas.

* 920 PX es el punto de interrupción en la versión de escritorio en sitios creados con Hostinger Website Builder

Para lograr la mejor experiencia del cliente, no se recomienda mostrar productos en más de tres columnas en dispositivos móviles 💡

Pega el código

Vaya a Configuración → Integraciones de su sitio web y pegue el código en el campo Código personalizado. Luego, guarde los cambios y actualice su sitio web.