Aligner les vignettes sous l'image principale

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,

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