[Skip to main content](#vessel-content) # Aligner les vignettes sous l'image principale ## - **[Pi\_R](/forum/user/12684-pi-r "View Pi_R's Profile")** - [![Pi_R's Avatar](https://www.hikashop.com/media/kunena/avatars/resized/size144/users/avatar_2013-02-19-2.png)](/forum/user/12684-pi-r "View Pi_R's Profile") Topic Author - [ Offline](/forum/user/12684-pi-r) Less More - Posts: 326 - Thank you received: 17 - - 5 years 9 months ago - 5 years 6 months ago [\#328300](#328300) by [Pi\_R](/forum/user/12684-pi-r "View Pi_R's Profile") *[Aligner les vignettes sous l'image principale](/forum/5-support-en-francais-french-support-/901666-aligner-les-vignettes-sous-limage-principale#328300 "-- 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")* was created by *[Pi\_R](/forum/user/12684-pi-r "View Pi_R's Profile")* -- 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 Last edit: 5 years 6 months ago by [Pi\_R](/forum/user/12684-pi-r "View Pi_R's Profile"). Reason: Problème apparemment réglé sur 4.4.2 Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzUtc3VwcG9ydC1lbi1mcmFuY2Fpcy1mcmVuY2gtc3VwcG9ydC0vOTAxNjY2LWFsaWduZXItbGVzLXZpZ25ldHRlcy1zb3VzLWxpbWFnZS1wcmluY2lwYWxlP3RtcGw9bWFya2Rvd24=) or [Create an account](/component/users/registration?Itemid=101) to join the conversation. - **[Philip](/forum/user/34318-philip "View Philip's Profile")** - [![Philip's Avatar](https://www.hikashop.com/media/kunena/avatars/resized/size144/users/avatar34318_2015-11-18-2.png)](/forum/user/34318-philip "View Philip's Profile") - [ Offline](/forum/user/34318-philip) Less More - Posts: 4820 - Thank you received: 652 - - 5 years 9 months ago - 5 years 9 months ago [\#328312](#328312) by [Philip](/forum/user/34318-philip "View Philip's Profile") Replied by *[Philip](/forum/user/34318-philip "View Philip's Profile")* on topic *[Aligner les vignettes sous l'image principale](/forum/5-support-en-francais-french-support-/901666-aligner-les-vignettes-sous-limage-principale#328312 "-- 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 : [ ![alt](https://i.ibb.co/vPSk1jx/css-align.png) ](https://i.ibb.co/vPSk1jx/css-align.png "alt") **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 Last edit: 5 years 9 months ago by [Philip](/forum/user/34318-philip "View Philip's Profile"). Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzUtc3VwcG9ydC1lbi1mcmFuY2Fpcy1mcmVuY2gtc3VwcG9ydC0vOTAxNjY2LWFsaWduZXItbGVzLXZpZ25ldHRlcy1zb3VzLWxpbWFnZS1wcmluY2lwYWxlP3RtcGw9bWFya2Rvd24=) or [Create an account](/component/users/registration?Itemid=101) to join the conversation. - **[Pi\_R](/forum/user/12684-pi-r "View Pi_R's Profile")** - [![Pi_R's Avatar](https://www.hikashop.com/media/kunena/avatars/resized/size144/users/avatar_2013-02-19-2.png)](/forum/user/12684-pi-r "View Pi_R's Profile") Topic Author - [ Offline](/forum/user/12684-pi-r) Less More - Posts: 326 - Thank you received: 17 - - 5 years 9 months ago [\#328315](#328315) by [Pi\_R](/forum/user/12684-pi-r "View Pi_R's Profile") Replied by *[Pi\_R](/forum/user/12684-pi-r "View Pi_R's Profile")* on topic *[Aligner les vignettes sous l'image principale](/forum/5-support-en-francais-french-support-/901666-aligner-les-vignettes-sous-limage-principale#328315 "-- 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, 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 : [ ![capture.png](/forum/attachment/51655) ](/forum/attachment/51655 "capture.png") 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 - [ ![capture.png](/forum/attachment/51655) ](/forum/attachment/51655 "capture.png") [ ](/forum/attachment/51655?download=1 "capture.png") Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzUtc3VwcG9ydC1lbi1mcmFuY2Fpcy1mcmVuY2gtc3VwcG9ydC0vOTAxNjY2LWFsaWduZXItbGVzLXZpZ25ldHRlcy1zb3VzLWxpbWFnZS1wcmluY2lwYWxlP3RtcGw9bWFya2Rvd24=) or [Create an account](/component/users/registration?Itemid=101) to join the conversation. - **[Philip](/forum/user/34318-philip "View Philip's Profile")** - [![Philip's Avatar](https://www.hikashop.com/media/kunena/avatars/resized/size144/users/avatar34318_2015-11-18-2.png)](/forum/user/34318-philip "View Philip's Profile") - [ Offline](/forum/user/34318-philip) Less More - Posts: 4820 - Thank you received: 652 - - 5 years 9 months ago - 5 years 9 months ago [\#328326](#328326) by [Philip](/forum/user/34318-philip "View Philip's Profile") Replied by *[Philip](/forum/user/34318-philip "View Philip's Profile")* on topic *[Aligner les vignettes sous l'image principale](/forum/5-support-en-francais-french-support-/901666-aligner-les-vignettes-sous-limage-principale#328326 "-- 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, 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 [ ![alt](https://i.ibb.co/pdKzYJH/horiz-align.png) ](https://i.ibb.co/pdKzYJH/horiz-align.png "alt") Et sur la vue variante [ ![alt](https://i.ibb.co/TWswSwR/vert-align.png) ](https://i.ibb.co/TWswSwR/vert-align.png "alt") 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 Last edit: 5 years 9 months ago by [Philip](/forum/user/34318-philip "View Philip's Profile"). Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzUtc3VwcG9ydC1lbi1mcmFuY2Fpcy1mcmVuY2gtc3VwcG9ydC0vOTAxNjY2LWFsaWduZXItbGVzLXZpZ25ldHRlcy1zb3VzLWxpbWFnZS1wcmluY2lwYWxlP3RtcGw9bWFya2Rvd24=) or [Create an account](/component/users/registration?Itemid=101) to join the conversation. Board Categories HikaShop Install & Update Product & Category Display Content Creation Sales and Orders Orders management Reports & Statistics Customers Checkout Payment Methods Shipping Methods Import & Export (CSV, XLS…) Specific Features Affilation Taxes Wishlist Vote Carousel & Slider Mass Actions Filters & Search Discount & Coupon Feature Request Integrations Showcase General Talk about HikaShop Development HikaShop 3.0 Beta Translation Commercial Jobs HikaShop Components HikaMarket Market: Feature requests Market: How to? Market: Bug Report HikaSerial General talk about HikaSerial Serial: Bug Report Serial: How to? Support en Français de HikaSerial (French Support) HikaSubscription HikaAuction Auction: Feature requests Auction: How to? Auction: Bug report Hikashop around the world Support en Français (French Support) Russian FAQ. Курс выживания с Hikashop. Частые вопросы и о Расширения Hikashop Наши сайты на Hikashop 日本語版サポート(Japanese Support) Thai German Archives Bug Report How to? [](/forum/topics/feed/mode-topics?format=feed&type=rss) Time to create page: 0.147 seconds [Powered by](/forum/credits) [Kunena Forum](https://www.kunena.org)