Cet article vous montre comment changer le Élément de remise sur les lots de produits Passer d'une mise en page horizontale à une mise en page verticale sur les appareils mobiles grâce à une CSS personnalisée.
Étape 1 : Ouvrez l’éditeur de code personnalisé
- Dans l'éditeur GemPages, survolez le Remise sur les lots de produits .
- Cliquez avec le bouton droit sur l'élément.
- Sélectionner Code personnalisé.
Étape 2 : Ajouter le code CSS
Étape 2 : Ajouter le code CSSCopiez et collez le CSS suivant dans l'éditeur de code personnalisé :
@media (max-width: 767px) { .ElementClass gp-product-bundle-discount { display: flex; flex-direction: column; } }
Étape 3 : Remplacer la classe de l’élément
remplacer .ElementClass avec la classe CSS réelle de votre Remise sur les lots de produits .
Étape 4 : Enregistrer et publier
- Cliquez à nouveau Enregistrer.
- Publier ta page.
- Ouvrez la page en direct ou prévisualisez-la pour vérifier que le pack de produits s'affiche désormais verticalement sur les appareils mobiles.
À noter: Ce CSS personnalisé ne s'applique qu'à votre page publiée ou à l'aperçu. Il ne sera pas visible dans l'éditeur GemPages.
Merci pour vos commentaires