Produits sur 2 colonnes en version mobile

  • Posts: 312
  • Thank you received: 15
  • Hikashop Business
3 years 10 months ago #327905

-- 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 ?

This message contains confidential information

Merci
Pierre

Attachments:

Please Log in or Create an account to join the conversation.

  • Posts: 82863
  • Thank you received: 13372
  • MODERATOR
3 years 10 months ago #327910

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:

.hkc-xs-12, .hkc-xs-11, .hkc-xs-10, .hkc-xs-9, .hkc-xs-8, .hkc-xs-7, .hkc-xs-6, .hkc-xs-5, .hkc-xs-4, .hkc-xs-3, .hkc-xs-2, .hkc-xs-1,
.hkc-sm-12, .hkc-sm-11, .hkc-sm-10, .hkc-sm-9, .hkc-sm-8, .hkc-sm-7, .hkc-sm-6, .hkc-sm-5, .hkc-sm-4, .hkc-sm-3, .hkc-sm-2, .hkc-sm-1,
.hkc-md-12, .hkc-md-11, .hkc-md-10, .hkc-md-9, .hkc-md-8, .hkc-md-7, .hkc-md-6, .hkc-md-5, .hkc-md-4, .hkc-md-3, .hkc-md-2, .hkc-md-1,
.hkc-lg-12, .hkc-lg-11, .hkc-lg-10, .hkc-lg-9, .hkc-lg-8, .hkc-lg-7, .hkc-lg-6, .hkc-lg-5, .hkc-lg-4, .hkc-lg-3, .hkc-lg-2, .hkc-lg-1,
.hkc-xl-12, .hkc-xl-11, .hkc-xl-10, .hkc-xl-9, .hkc-xl-8, .hkc-xl-7, .hkc-xl-6, .hkc-xl-5, .hkc-xl-4, .hkc-xl-3, .hkc-xl-2, .hkc-xl-1{
	width: 100%;
}
en:
.hkc-xs-12, .hkc-xs-11, .hkc-xs-10, .hkc-xs-9, .hkc-xs-8, .hkc-xs-7, .hkc-xs-6, .hkc-xs-5, .hkc-xs-4, .hkc-xs-3, .hkc-xs-2, .hkc-xs-1,
.hkc-sm-12, .hkc-sm-11, .hkc-sm-10, .hkc-sm-9, .hkc-sm-8, .hkc-sm-7, .hkc-sm-6, .hkc-sm-5, .hkc-sm-4, .hkc-sm-3, .hkc-sm-2, .hkc-sm-1,
.hkc-md-12, .hkc-md-11, .hkc-md-10, .hkc-md-9, .hkc-md-8, .hkc-md-7, .hkc-md-6, .hkc-md-5, .hkc-md-4, .hkc-md-3, .hkc-md-2, .hkc-md-1,
.hkc-lg-12, .hkc-lg-11, .hkc-lg-10, .hkc-lg-9, .hkc-lg-8, .hkc-lg-7, .hkc-lg-6, .hkc-lg-5, .hkc-lg-4, .hkc-lg-3, .hkc-lg-2, .hkc-lg-1,
.hkc-xl-12, .hkc-xl-11, .hkc-xl-10, .hkc-xl-9, .hkc-xl-8, .hkc-xl-7, .hkc-xl-6, .hkc-xl-5, .hkc-xl-4, .hkc-xl-3, .hkc-xl-2, .hkc-xl-1{
	width: 50%;
}
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.

Please Log in or Create an account to join the conversation.

  • Posts: 312
  • Thank you received: 15
  • Hikashop Business
3 years 10 months ago #327931

Bonjour,

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

Please Log in or Create an account to join the conversation.

  • Posts: 82863
  • Thank you received: 13372
  • MODERATOR
3 years 10 months ago #327934

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

Please Log in or Create an account to join the conversation.

  • Posts: 312
  • Thank you received: 15
  • Hikashop Business
3 years 10 months ago #327943

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

Please Log in or Create an account to join the conversation.

  • Posts: 8
  • Thank you received: 0
3 years 4 months ago #334435

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) {

Please Log in or Create an account to join the conversation.

  • Posts: 82863
  • Thank you received: 13372
  • MODERATOR
3 years 4 months ago #334439

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

The following user(s) said Thank You: Elegantia

Please Log in or Create an account to join the conversation.

  • Posts: 8
  • Thank you received: 0
3 years 4 months ago #334481

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,

Please Log in or Create an account to join the conversation.

  • Posts: 82863
  • Thank you received: 13372
  • MODERATOR
3 years 4 months ago #334483

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:

img.hikashop_product_listing_image {
    display: inline !important;
}
.hikashop_product_image_subdiv {
    width: 100% !important;
}
.hikashop_product_image {
    height: auto !important;
}

Please Log in or Create an account to join the conversation.

  • Posts: 8
  • Thank you received: 0
3 years 3 weeks ago #336664

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

.hkc-sm-12, .hkc-sm-11, .hkc-sm-10, .hkc-sm-9, .hkc-sm-8, .hkc-sm-7, .hkc-sm-6, .hkc-sm-5, .hkc-sm-4, .hkc-sm-3, .hkc-sm-2, .hkc-sm-1,
.hkc-md-12, .hkc-md-11, .hkc-md-10, .hkc-md-9, .hkc-md-8, .hkc-md-7, .hkc-md-6, .hkc-md-5, .hkc-md-4, .hkc-md-3, .hkc-md-2, .hkc-md-1,

.hkc-lg-12, .hkc-lg-11, .hkc-lg-10, .hkc-lg-9, .hkc-lg-8, .hkc-lg-7, .hkc-lg-6, .hkc-lg-5, .hkc-lg-4, .hkc-lg-3, .hkc-lg-2, .hkc-lg-1,

.hkc-xl-12, .hkc-xl-11, .hkc-xl-10, .hkc-xl-9, .hkc-xl-8, .hkc-xl-7, .hkc-xl-6, .hkc-xl-5, .hkc-xl-4, .hkc-xl-3, .hkc-xl-2, .hkc-xl-1{
	width: 50%;
}


.hkc-xs-12, .hkc-xs-11, .hkc-xs-10, .hkc-xs-9, .hkc-xs-8, .hkc-xs-7, .hkc-xs-6, .hkc-xs-5, .hkc-xs-4, .hkc-xs-3, .hkc-xs-2, .hkc-xs-1{
	width: 100%; 
}

Please Log in or Create an account to join the conversation.

  • Posts: 82863
  • Thank you received: 13372
  • MODERATOR
3 years 3 weeks ago #336670

Bonjour,

Il faut encapsuler votre CSS comme ceci par exemple:

@media (min-width:400px and max-width:800px) {
 .hkc-md-3 {
 width: 100%;
 }
}
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.

Please Log in or Create an account to join the conversation.

  • Posts: 8
  • Thank you received: 0
3 years 3 weeks ago #336674

Bonjour,

Merci pour le retour rapide, je vais essayer de suite :)

Bonne semaine,

Please Log in or Create an account to join the conversation.

Time to create page: 0.087 seconds
Powered by Kunena Forum