Cette fonctionnalité est disponible avec tous les forfaits Goodshuffle Pro.
Si vous utilisez l’intégration de site web pour afficher votre inventaire sur votre site, vous avez peut-être remarqué que sur mobile, les articles s’affichent en une seule colonne. Bien que cette disposition par défaut soit adaptée aux mobiles, certains utilisateurs préfèrent une grille plus compacte qui montre plus de produits à la fois, surtout pour les catégories très fournies comme la décoration ou les articles de fête.
Avec une petite modification CSS, vous pouvez créer une grille propre en deux colonnes pour les écrans mobiles de moins de 766px de large.
Comment appliquer la grille mobile
Pour créer une grille en deux colonnes sur mobile, ajoutez le CSS suivant à votre feuille de style globale afin qu’il se charge sur toutes les pages :
@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;
}
}Aperçu du rendu
Voici un exemple de ce à quoi ressemble la grille mobile en deux colonnes :
Instructions étape par étape
Connectez-vous à votre éditeur de site web.
Si vous utilisez des plateformes comme Wix, Squarespace ou WordPress, cherchez la section où vous pouvez modifier ou ajouter du CSS global.
Trouvez l’éditeur CSS.
Dans la plupart des éditeurs, cela se trouve sous Paramètres du site, Design ou Avancé > Code personnalisé.
Collez le code ci-dessus.
Assurez-vous qu’il est bien inclus dans la feuille de style principale de votre site ou là où vous gérez les styles spécifiques au mobile.
Enregistrez et publiez vos modifications.
Prévisualisez votre site sur un appareil mobile.
Vous devriez maintenant voir votre inventaire Goodshuffle Pro affiché dans une jolie grille à deux colonnes !
Conseils pour de meilleurs résultats
Ce code ne s’applique qu’aux écrans de 766px de large ou moins, donc la version bureau et la plupart des tablettes ne seront pas affectées.
Assurez-vous que le thème ou l’éditeur de votre site ne remplace pas ce code personnalisé — certains thèmes nécessitent d’ajouter
!importantau CSS.
Besoin d’aide supplémentaire ?
Cliquez sur la bulle de chat bleue en bas à droite de votre écran pour contacter notre équipe support — nous sommes là pour vous aider !
Clause de non-responsabilité : Cet article a été traduit à l’aide de l’IA. Pour toute question ou clarification, contactez-nous via la bulle de chat en bas à droite de votre écran.