Produits sur 2 colonnes en version mobile

-- HikaShop version -- : 4.4.0
-- Joomla version -- : 3.9.23

Bonjour,

je ne parviens pas à faire en sorte que mes listings produits (DIV) s'affichent sur 2 colonnes en version mobile : ils s'entêtent à rester automatiquement sur une colonne unique. Quel paramétrage aurais-je pu louper svp ?

Merci
Pierre

Bonjour,

Il n'y a pas d'option dans HikaShop pour cela. Cela passe automatiquement de plusieurs colonnes à 1 colonne.
Si vous voulez changer cela, alors il faudra rajouter du CSS dans l'option "styles pour le frontend" de la configuration pour override le CSS par défaut dans le fichier media/com_hikashop/css/hikashop.css
Le plus simple serait de modifier directement ce fichier en changeant le code: en: Cependant, vous perdrez la modification à chaque mise à jour donc il vaut mieux passer par du CSS override, plus complexe, pour vous simplifier la vie sur le long terme.

Bonjour,

J'ai tenté de remplacer le 100% par 50% directement dans le fichier indiqué mais cela ne change rien.

Bonjour,

Pourtant, je vois toujours 100% à cet endroit sur votre site:
monosnap.com/file/KY43ZAc1KDBDWKZOXTaFlYhG8B5tov
Et si je change en 50% avec l'inspecteur de mon navigateur, je passe bien en 2 colonnes avec l'affichage mobile:
monosnap.com/file/w4agqFE9nK1GZraO1DHIzCWAQcA8Fs

Bonsoir,
j'avais remis 100%...
Mais je viens de refaire un essai et en supprimant bien le cache du navigateur cela fonctionne en effet, même si la taille de mes vignettes ne s'adapte pas, elle.
Merci

Bonjour,

Je me permets de relancer le sujet car j'ai le même souci que Pi_R sur mon site:
www.elegantiastore.fr/index.php/fr/

Y a t'il eu une mise à jour pour faciliter le passage à deux colonnes ?
Quand je tente de passer à deux colonnes via le layout de mon template, seul le texte se déplace.
De plus, la forme du CSS n'est plus la même depuis votre dernière réponse (voir ci dessous).

Pourriez-vous m'orienter? Merci d'avance !

.hkc-xs-1, .hkc-sm-1, .hkc-md-1, .hkc-lg-1, .hkc-xl-1, .hkc-xs-2, .hkc-sm-2, .hkc-md-2, .hkc-lg-2, .hkc-xl-2, .hkc-xs-3, .hkc-sm-3, .hkc-md-3, .hkc-lg-3, .hkc-xl-3, .hkc-xs-4, .hkc-sm-4, .hkc-md-4, .hkc-lg-4, .hkc-xl-4, .hkc-xs-5, .hkc-sm-5, .hkc-md-5, .hkc-lg-5, .hkc-xl-5, .hkc-xs-6, .hkc-sm-6, .hkc-md-6, .hkc-lg-6, .hkc-xl-6, .hkc-xs-7, .hkc-sm-7, .hkc-md-7, .hkc-lg-7, .hkc-xl-7, .hkc-xs-8, .hkc-sm-8, .hkc-md-8, .hkc-lg-8, .hkc-xl-8, .hkc-xs-9, .hkc-sm-9, .hkc-md-9, .hkc-lg-9, .hkc-xl-9, .hkc-xs-10, .hkc-sm-10, .hkc-md-10, .hkc-lg-10, .hkc-xl-10, .hkc-xs-11, .hkc-sm-11, .hkc-md-11, .hkc-lg-11, .hkc-xl-11, .hkc-xs-12, .hkc-sm-12, .hkc-md-12, .hkc-lg-12 {
position:relative; min-height:1px; padding-left:15px; padding-right:15px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.hkc-xs-1, .hkc-xs-2, .hkc-xs-3, .hkc-xs-4, .hkc-xs-5, .hkc-xs-6, .hkc-xs-7, .hkc-xs-8, .hkc-xs-9, .hkc-xs-10, .hkc-xs-11, .hkc-xs-12 {
float:left;
}
.hkc-xs-12 { width:100%; }
.hkc-xs-11 { width:91.66666667%; }
.hkc-xs-10 { width:83.33333333%; }
.hkc-xs-9 { width:75%; }
.hkc-xs-8 { width:66.66666667%; }
.hkc-xs-7 { width:58.33333333%; }
.hkc-xs-6 { width:50%; }
.hkc-xs-5 { width:41.66666667%; }
.hkc-xs-4 { width:33.33333333%; }
.hkc-xs-3 { width:25%; }
.hkc-xs-2 { width:16.66666667%; }
.hkc-xs-1 { width:8.33333333%; }
@media (min-width:768px) {

Bonjour,

Non, c'est toujours la même chose:
i.imgur.com/4jOqTpk.png
Le code CSS que vous pointez est dans media/com_hikashop/css/style_default.css. Ce fichier n'est pas utilisé par défaut dans HikaShop.
Sur ce sujet, nous parlons du fichier media/com_hikashop/css/hikashop.css

Bonsoir,

Réponse rapide et pertinente !

Merci beaucoup, j'ai réussi

En complément, je tombe sur le même souci que mon prédécesseur quant à position des photos vis à vis du texte. Il y a un léger déphasage et les images ne sont pas centrées dans leurs carrés respectifs (ce qui m'a d'ailleurs permis de voir que mes images ne sont pas de taille identique mais je reprends grâce à ce post ). Quelle serait la meilleure manière de procéder ?

Cordialement,

Bonjour,

Cela vient en parti du CSS de votre template.
Vous pouvez corriger tout cela avec un peu de CSS à rajouter sur le site.
Par exemple:

Bonjour,
Je reviens vers vous pour compléter le sujet.
Une fois passer en deux colonnes (tout va bien), je me rends compte que sur les plus petites versions mobile les images se chevauchent. site
J'ai tenté de repasser en une seule colonne pour les plus petits écrans (code ci-dessous); sans succès. Me suis-je trompé sur la procédure à suivre ? Si oui, existe il une possibilité pour dire à hika: si image se touche = 1 seule colonne ? Car dans les fait, losque l'écran s'agrandi suffisamment, le site passe bien à 3 colonnes

Merci d'avance

Bonjour,

Il faut encapsuler votre CSS comme ceci par exemple: Ainsi, les divs avec la classe hkc-md-3 passeront en une colonne seulement lorsque la largeur de l'écran sera entre 400 et 800px.
Donc après, il faut adapter le CSS et les min-width/max-width à votre situation pour que le CSS force la taille des divs de chaque produit dans le listing en fonction de la largeur de l'écran.
C'est quelque chose que nous ne pouvons pas vraiment faire par défaut car les largeurs nécessitant de changer le nombre de colonnes dépendent de la taille des images, du CSS du template, des modules affichés sur les cotés, etc. Et malheureusement il n'y pas de système en CSS qui permettrait de dire que si l'image dépasse du cadre il faut utiliser tel CSS.

Bonjour,

Merci pour le retour rapide, je vais essayer de suite

Bonne semaine,