Aligner les vignettes sous l'image principale

-- HikaShop version -- : 4.4.0
-- Joomla version -- : 3.9.24

Bonjour,

j'ai trouvé sur votre site comment modifier la taille des miniatures sous la photo principale en page produit, mais je n'ai pas trouvé comment les aligner :

• soit horizontalement (avec une même hauteur) sous cette photo
• soit verticalement (avec une même largeur) à gauche de cette photo

Pour la 1ère possibilité j'ai ajouté display:inline-flex; dans #hikashop_small_image_div mais cela ne maintient pas les vignettes côte à côte dès que je modifie la variante.
Comment pourrais-je y parvenir (j'aimerais tester les deux possibilités) ?
Merci
Pierre

Bonjour,

Désolé pour ce retour, mais ,nous ne sommes pas sur de vous comprendre car lorsque nous utilisons votre lien Url, nous constatons que vos miniatures sont alignées, voyez mes screenshot pour mieux comprendre mon idée :


1° la première vous montre un alignement en horizontal par rapport à l'image principale (en vert)
2° Puis je vous montre que vos miniatures sont déjà alignées verticalement l'une par rapport à l'autre (en rouge).

Du coup, pouvez vous illustrez vos besoin avec une screenshot annotée, en suivant mon modéle pour que nous puissions mieux comprendre vos attentes et ainsi vous guider au mieux.

Cordialement

Bonjour,

veuillez m'excuser, j'aurais dû joindre une capture dès le départ.
En effet avec le code CSS que j'ai ajouté (cf post #1) mes vignettes sont bien alignées suivant votre modèle rouge. Mais lorsque je change de variante sur cette page produit, j'obtiens ceci :

alors que je voudrais :

• soit conserver comme votre modèle rouge
• soit que sur la page produit et sur la page variante ce soit comme les points "1" et "2" de ma capture

Je vous remercie.
Cordialement

Bonjour,

Alors déjà je vais vous expliquer pourquoi ce qui fonctionne avec le produit "principale", ne fonctionne plus avec les version "variantes".
D'abord voici, votre commande CSS, qui donc fait votre alignement actuel :
Sur le produit principale

Et sur la vue variante


En fait, vous devez écrire votre commande Css en tenant compte du fait que vos vues images produit possédent autant de "versions" (et sous-versions) que de variantes (+ le produit principale).
Donc, ici si vous voulez que votre commande Css soit consistente, il vous suffit d'ajouter autant de selecteurs que de versions produits donc.

Ensuite, pour réaliser ce que vous montrez dans votre screenshot :
D'abord vous devez (si ce n'est pas encore le cas) permettre à tout vos éléments de pouvoir être à coté (image principale + sub image), donc avec ce type de commandes :
.Main_image,
.Sub_img {
display : inline-block;
}
ET aussi définir des largeurs pour chaque éléments qui permettent de tenir sans "dépasser" ou "sortir" de leur containeur commun, exemple :
.Main_image {width: 75%;}
.Sub_img {width: 24%;}
OU BIEN, si votre containeur fait par exemple, 400px
.Main_image {width: 320px;}
].Sub_img {width: 79px;}

En espérant que cela vous aide à atteindre votre idéal d'affichage.
Cordialement