Esta función está disponible en todos los planes de Goodshuffle Pro.
Si usas la Integración Web para mostrar tu inventario en tu sitio, es posible que hayas notado que en dispositivos móviles los artículos aparecen en una sola columna. Aunque este diseño predeterminado es compatible con móviles, algunos usuarios prefieren una cuadrícula más compacta que muestre más productos a la vez, especialmente en categorías con muchos artículos como decoración o suministros para fiestas.
Con una pequeña actualización de CSS, puedes crear una cuadrícula limpia de dos columnas para pantallas móviles de menos de 766px de ancho.
Cómo aplicar el diseño de cuadrícula en móviles
Para crear una cuadrícula de dos columnas en móviles, agrega el siguiente CSS al CSS global de tu sitio para que se cargue en todas las páginas:
@media screen and (max-width: 766px) {
gspro-item-list .gspro-o-card-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-auto-rows: 288px;
grid-gap: 10px;
justify-items: center;
padding-bottom: 12px;
}
}Cómo se ve
Aquí tienes un ejemplo de cómo se ve la cuadrícula de dos columnas en móviles:
Instrucciones paso a paso
Inicia sesión en el editor de tu sitio web.
Si usas plataformas como Wix, Squarespace o WordPress, busca una sección donde puedas editar o crear el CSS global del sitio.
Ubica el editor de CSS.
En la mayoría de los editores, lo encontrarás en Configuración del sitio, Diseño o Avanzado > Código personalizado.
Pega el código de arriba.
Asegúrate de incluirlo en la hoja de estilos principal de tu sitio o donde administres los estilos específicos para móviles.
Guarda y publica los cambios.
Previsualiza tu sitio en un dispositivo móvil.
¡Ahora deberías ver tu inventario de Goodshuffle Pro en una cuadrícula ordenada de dos columnas!
Consejos para mejores resultados
Este código solo se aplica a pantallas de 766px de ancho o menos, por lo que el diseño de escritorio y la mayoría de las tabletas no se verá afectado.
Asegúrate de que el tema o editor de tu sitio no sobrescriba este código personalizado; algunos temas requieren que marques el CSS como
!important.
¿Necesitas ayuda adicional?
Haz clic en la burbuja azul de chat en la esquina inferior de tu pantalla para enviar un mensaje a nuestro equipo de soporte. ¡Estamos para ayudarte!
Aviso: Este artículo fue traducido usando IA. Si tienes preguntas o necesitas aclaraciones, contáctanos usando la burbuja de chat en la esquina inferior de tu pantalla.