- Posts: 158
- Thank you received: 8
Hikashop3 mobile breakpointS
9 years 4 months ago #269880
by pprle
Hikashop3 mobile breakpointS was created by pprle
-- HikaShop version -- : 3.0.1
-- Joomla version -- : 3.7.1
J'ai trouvé ceci:
J'ai parcouru la page CSS TRICKS mais au final je ne sais toujours pas ce que je dois faire...
Pouvez-vous SVP nous écrire le code nécessaire pour le passage à des colonnes intermédiaires?
Pouvez-vous donner des exemples de breakpoints successifs pour que nous puissions après les ajouter à notre convenance?
Notre but est le suivant:
XL : 3 colonnes
L: 3 colonnes
M: 3 colonnes
s: 2 colonnes
xs: 1 colonne
Faut-il ajouter ce code ou doit-il être modifié quelque part?
Merci d'avance...
-- Joomla version -- : 3.7.1
J'ai trouvé ceci:
En mettant à jour vers HikaShop 3, les listings passeront en 1 colonnes automatiquement peu importe si le template supporte bootstrap ou pas et peu importe l'option "use bootstrap design". Mais la problématique sera toujours la même pour du 2 colonnes. Il faudra rajouter du CSS @media.
J'ai parcouru la page CSS TRICKS mais au final je ne sais toujours pas ce que je dois faire...
Pouvez-vous SVP nous écrire le code nécessaire pour le passage à des colonnes intermédiaires?
Pouvez-vous donner des exemples de breakpoints successifs pour que nous puissions après les ajouter à notre convenance?
Notre but est le suivant:
XL : 3 colonnes
L: 3 colonnes
M: 3 colonnes
s: 2 colonnes
xs: 1 colonne
Faut-il ajouter ce code ou doit-il être modifié quelque part?
Merci d'avance...
Please Log in or Create an account to join the conversation.
9 years 4 months ago #269904
by nicolas
Replied by nicolas on topic Hikashop3 mobile breakpointS
Bonjour,
Si vous connaissez déjà le CSS. Il n'y a rien de compliqué.
Il suffit de rajouter ce genre de CSS:
@media (min-width:XXXpx) and (max-width:YYYpx) {
.ZZZ { width:50% !important; }
}
où XXX est la largeur minimum de l'écran et YYY la largeur minimum de l'écran pour lesquelles vous voulez votre listing en 2 colonnes. Et ZZZ est le nom de classe CSS du conteneur de chaque box produit. Vous pouvez utiliser la classe hikashop_product à la place de ZZZ.
Si vous connaissez déjà le CSS. Il n'y a rien de compliqué.
Il suffit de rajouter ce genre de CSS:
@media (min-width:XXXpx) and (max-width:YYYpx) {
.ZZZ { width:50% !important; }
}
où XXX est la largeur minimum de l'écran et YYY la largeur minimum de l'écran pour lesquelles vous voulez votre listing en 2 colonnes. Et ZZZ est le nom de classe CSS du conteneur de chaque box produit. Vous pouvez utiliser la classe hikashop_product à la place de ZZZ.
Please Log in or Create an account to join the conversation.
Time to create page: 0.169 seconds