[Skip to main content](#vessel-content)

#   Image miniature en responsive

##

- **[celinem](/forum/user/34131-celinem "View celinem's Profile")**
- [![celinem's Avatar](https://www.hikashop.com/media/kunena/core/svg/person.svg)](/forum/user/34131-celinem "View celinem's Profile") Topic Author
- [ Offline](/forum/user/34131-celinem)

Less More

- Posts: 41
- Thank you received: 1
-
-

11 years 1 month ago [\#212958](#212958) by [celinem](/forum/user/34131-celinem "View celinem's Profile")  *[Image miniature en responsive](/forum/5-support-en-francais-french-support-/879035-image-miniature-en-responsive#212958 "-- HikaShop version -- : 2.5.0 -- Joomla version -- : 3.4.3  Bonjour,  Problème de gestion des images-vignette dans les fiches produits en responsive. Voir les copies d'écran.  En responsive, le format &quot;vignette&quot; disparait. Et les images apparaisent à la verticale.  Dans le frontend&#95;custom.css J'ai ajouté : /&#42;&#42; &#42; Taille miniature responsive &#42;/ img.hikashop&#95;child&#95;image { height: 70px !important; width: auto!important; }  Merci à vous pour votre aide.")* was created by *[celinem](/forum/user/34131-celinem "View celinem's Profile")*

-- HikaShop version -- : 2.5.0
-- Joomla version -- : 3.4.3

Bonjour,

Problème de gestion des images-vignette dans les fiches produits en responsive.
Voir les copies d'écran.

En responsive, le format "vignette" disparait.
Et les images apparaisent à la verticale.

Dans le frontend_custom.css
J'ai ajouté :
/**
* Taille miniature responsive
*/
img.hikashop_child_image { height: 70px !important; width: auto!important; }

Merci à vous pour votre aide.

- [ ![fiche-produit-miniatures-normales.jpg](/forum/attachment/26208) ](/forum/attachment/26208 "...s-normales.jpg") [ ](/forum/attachment/26208?download=1 "...s-normales.jpg")
- [ ![fiche-produit-miniatures-responsive.jpg](/forum/attachment/26209) ](/forum/attachment/26209 "...responsive.jpg") [ ](/forum/attachment/26209?download=1 "...responsive.jpg")

Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzUtc3VwcG9ydC1lbi1mcmFuY2Fpcy1mcmVuY2gtc3VwcG9ydC0vODc5MDM1LWltYWdlLW1pbmlhdHVyZS1lbi1yZXNwb25zaXZlP3RtcGw9bWFya2Rvd24=) or [Create an account](/component/users/registration?Itemid=101) to join the conversation.

- **[Jerome](/forum/user/80-jerome "View Jerome's Profile")**
- [![Jerome's Avatar](https://www.hikashop.com/media/kunena/avatars/resized/size144/users/avatar80.png)](/forum/user/80-jerome "View Jerome's Profile")
- [ Offline](/forum/user/80-jerome)
- HikaShop core developer

Less More

- Posts: 26394
- Thank you received: 4078
-
- [](http://obsi.dev)
-

11 years 1 month ago [\#212964](#212964) by [Jerome](/forum/user/80-jerome "View Jerome's Profile")  Replied by *[Jerome](/forum/user/80-jerome "View Jerome's Profile")* on topic *[Image miniature en responsive](/forum/5-support-en-francais-french-support-/879035-image-miniature-en-responsive#212964 "-- HikaShop version -- : 2.5.0 -- Joomla version -- : 3.4.3  Bonjour,  Problème de gestion des images-vignette dans les fiches produits en responsive. Voir les copies d'écran.  En responsive, le format &quot;vignette&quot; disparait. Et les images apparaisent à la verticale.  Dans le frontend&#95;custom.css J'ai ajouté : /&#42;&#42; &#42; Taille miniature responsive &#42;/ img.hikashop&#95;child&#95;image { height: 70px !important; width: auto!important; }  Merci à vous pour votre aide.")*

Bonjour,

Je ne vois malheureusement pas quoi vous dire pour vous aider vu qu'il n'y a aucune question dans votre message ni d'explication sur le soucis.
Je n'ai pas de soucis de miniature sur le site de démonstration ou sur mes sites de test (avec un template boostrap 2) ; je suppose donc que le soucis est lié à votre template ou à votre ajout de règle CSS.

Cordialement,

---

Jerome - Obsidev.com
HikaMarket &amp; HikaSerial developer / HikaShop core dev team.

Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzUtc3VwcG9ydC1lbi1mcmFuY2Fpcy1mcmVuY2gtc3VwcG9ydC0vODc5MDM1LWltYWdlLW1pbmlhdHVyZS1lbi1yZXNwb25zaXZlP3RtcGw9bWFya2Rvd24=) or [Create an account](/component/users/registration?Itemid=101) to join the conversation.

- **[celinem](/forum/user/34131-celinem "View celinem's Profile")**
- [![celinem's Avatar](https://www.hikashop.com/media/kunena/core/svg/person.svg)](/forum/user/34131-celinem "View celinem's Profile") Topic Author
- [ Offline](/forum/user/34131-celinem)

Less More

- Posts: 41
- Thank you received: 1
-
-

11 years 1 month ago -  11 years 1 month ago [\#213362](#213362) by [celinem](/forum/user/34131-celinem "View celinem's Profile")  Replied by *[celinem](/forum/user/34131-celinem "View celinem's Profile")* on topic *[Image miniature en responsive](/forum/5-support-en-francais-french-support-/879035-image-miniature-en-responsive#213362 "-- HikaShop version -- : 2.5.0 -- Joomla version -- : 3.4.3  Bonjour,  Problème de gestion des images-vignette dans les fiches produits en responsive. Voir les copies d'écran.  En responsive, le format &quot;vignette&quot; disparait. Et les images apparaisent à la verticale.  Dans le frontend&#95;custom.css J'ai ajouté : /&#42;&#42; &#42; Taille miniature responsive &#42;/ img.hikashop&#95;child&#95;image { height: 70px !important; width: auto!important; }  Merci à vous pour votre aide.")*

Bonjour,

J'ai peut-être effectivement manqué d'explication.
Mais à la lecture de votre forum c'est apprrement un problème récurent.
Les problèmes de mise en page à partir du moment où le template n'est pas boostrap.
Et encore, comme vous le précisez en version 2 (et non en 3 ou 4 !).

Bref, je me vois à insérer du CSS un "peu partout".
Et là je bloque depuis un bon moment et je ne trouve malheureusement tjrs pas.

La gestion des vignettes ou des images miniatures en dessous de la grande dans la fiche produit.
Dans le cutom.css, j'ai ajouté :
@media only screen and (min-width: 481px) {
.hikashop_small_image_div img{ width: 30% !important; height: auto !important; }
}

Au format 'tablette' c'est bon.
Mais sur un format 'phone' les petites vignettes sont à la bonne taille mais elle ne reste pas à l'horizontale, elle bascule à la verticlale.

Je vous transmet 2 fichiers joints, ca sera sûrement plus simple à comprendre.
LA fiche produit correspondante (pour exemple) :
xxxxxxxxxxxxxxxxxxxxxxxxx

Je ne sais pas où agir pour que ces 2 vignettes restent 'collées'.
Si vous pouviez m'orienter et m'aider à trouver le bon code à ajouter.
Vous remerciant

- [ ![fich-produit-format-tablette.jpg](/forum/attachment/26294) ](/forum/attachment/26294 "...t-tablette.jpg") [ ](/forum/attachment/26294?download=1 "...t-tablette.jpg")
- [ ![fich-produit-format-phone.jpg](/forum/attachment/26295) ](/forum/attachment/26295 "...rmat-phone.jpg") [ ](/forum/attachment/26295?download=1 "...rmat-phone.jpg")

Last edit: 11 years 1 month ago by [celinem](/forum/user/34131-celinem "View celinem's Profile").

Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzUtc3VwcG9ydC1lbi1mcmFuY2Fpcy1mcmVuY2gtc3VwcG9ydC0vODc5MDM1LWltYWdlLW1pbmlhdHVyZS1lbi1yZXNwb25zaXZlP3RtcGw9bWFya2Rvd24=) or [Create an account](/component/users/registration?Itemid=101) to join the conversation.

- **[nicolas](/forum/user/63-nicolas "View nicolas's Profile")**
- [![nicolas's Avatar](https://www.hikashop.com/media/kunena/avatars/resized/size144/users/avatar63.png)](/forum/user/63-nicolas "View nicolas's Profile")
- [ Away](/forum/user/63-nicolas)

Less More

- Posts: 86284
- Thank you received: 14263
-
-

11 years 1 month ago [\#213392](#213392) by [nicolas](/forum/user/63-nicolas "View nicolas's Profile")  Replied by *[nicolas](/forum/user/63-nicolas "View nicolas's Profile")* on topic *[Image miniature en responsive](/forum/5-support-en-francais-french-support-/879035-image-miniature-en-responsive#213392 "-- HikaShop version -- : 2.5.0 -- Joomla version -- : 3.4.3  Bonjour,  Problème de gestion des images-vignette dans les fiches produits en responsive. Voir les copies d'écran.  En responsive, le format &quot;vignette&quot; disparait. Et les images apparaisent à la verticale.  Dans le frontend&#95;custom.css J'ai ajouté : /&#42;&#42; &#42; Taille miniature responsive &#42;/ img.hikashop&#95;child&#95;image { height: 70px !important; width: auto!important; }  Merci à vous pour votre aide.")*

Bonjour,

C'est en effet un problème récurrent et c'est normal. Sans bootstrap, HikaShop utilise les anciennes interfaces d'HikaShop qui ne sont pas responsive (car cela n'existait pas quand elles ont été créées). Donc forcément, c'est normal que vous ayez des soucis d'affichage sur mobiles et tablettes dans ce cas. D'où le fait que nous recommandons soit d'utiliser des templates Joomla faits pour HikaShop ou des templates Joomla compatible bootstrap 2.

Il est normal que vous CSS ne change rien sur mobile.
Dans votre code CSS vous dites que vous voulez qu'il ne s'applique qu'à partir de 481px en largeur alors que sur mobile vous êtes en dessous de cela.
Ce genre de CSS devrait faire l'affaire: Code:

@media only screen and (max-width: 481px) { img.hikashop_child_image { width: 30% !important; } .hikashop_product_left_part { width: 100% !important; } }

The following user(s) said Thank You: [celinem](/forum/user/34131-celinem "View celinem's Profile")

Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzUtc3VwcG9ydC1lbi1mcmFuY2Fpcy1mcmVuY2gtc3VwcG9ydC0vODc5MDM1LWltYWdlLW1pbmlhdHVyZS1lbi1yZXNwb25zaXZlP3RtcGw9bWFya2Rvd24=) or [Create an account](/component/users/registration?Itemid=101) to join the conversation.

- **[celinem](/forum/user/34131-celinem "View celinem's Profile")**
- [![celinem's Avatar](https://www.hikashop.com/media/kunena/core/svg/person.svg)](/forum/user/34131-celinem "View celinem's Profile") Topic Author
- [ Offline](/forum/user/34131-celinem)

Less More

- Posts: 41
- Thank you received: 1
-
-

11 years 1 month ago -  11 years 1 month ago [\#213408](#213408) by [celinem](/forum/user/34131-celinem "View celinem's Profile")  Replied by *[celinem](/forum/user/34131-celinem "View celinem's Profile")* on topic *[Image miniature en responsive](/forum/5-support-en-francais-french-support-/879035-image-miniature-en-responsive#213408 "-- HikaShop version -- : 2.5.0 -- Joomla version -- : 3.4.3  Bonjour,  Problème de gestion des images-vignette dans les fiches produits en responsive. Voir les copies d'écran.  En responsive, le format &quot;vignette&quot; disparait. Et les images apparaisent à la verticale.  Dans le frontend&#95;custom.css J'ai ajouté : /&#42;&#42; &#42; Taille miniature responsive &#42;/ img.hikashop&#95;child&#95;image { height: 70px !important; width: auto!important; }  Merci à vous pour votre aide.")*

Génial ! ![:)](/media/kunena/emoticons/8.png ":)")
Ca m'a été d'un grand secours
Merci ![:)](/media/kunena/emoticons/8.png ":)")

Last edit: 11 years 1 month ago by [celinem](/forum/user/34131-celinem "View celinem's Profile").

Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzUtc3VwcG9ydC1lbi1mcmFuY2Fpcy1mcmVuY2gtc3VwcG9ydC0vODc5MDM1LWltYWdlLW1pbmlhdHVyZS1lbi1yZXNwb25zaXZlP3RtcGw9bWFya2Rvd24=) or [Create an account](/component/users/registration?Itemid=101) to join the conversation.

- **[sydney](/forum/user/42069-sydney "View sydney's Profile")**
- [![sydney's Avatar](https://www.hikashop.com/media/kunena/core/svg/person.svg)](/forum/user/42069-sydney "View sydney's Profile")
- [ Offline](/forum/user/42069-sydney)

Less More

- Posts: 1
- Thank you received: 0
-
-

10 years 6 months ago [\#235841](#235841) by [sydney](/forum/user/42069-sydney "View sydney's Profile")  Replied by *[sydney](/forum/user/42069-sydney "View sydney's Profile")* on topic *[Image miniature en responsive](/forum/5-support-en-francais-french-support-/879035-image-miniature-en-responsive#235841 "-- HikaShop version -- : 2.5.0 -- Joomla version -- : 3.4.3  Bonjour,  Problème de gestion des images-vignette dans les fiches produits en responsive. Voir les copies d'écran.  En responsive, le format &quot;vignette&quot; disparait. Et les images apparaisent à la verticale.  Dans le frontend&#95;custom.css J'ai ajouté : /&#42;&#42; &#42; Taille miniature responsive &#42;/ img.hikashop&#95;child&#95;image { height: 70px !important; width: auto!important; }  Merci à vous pour votre aide.")*

Bonjour,
Je n'arrive pas à régler le chevauchement de mes vignettes, j'ai fait le tour du forum mais je ne vois que des problèmes sur mobile, c'est depuis pc en ce qui me concerne. J'utilise bootstrap sur joomla 3, ci-joint le problème en image.
Merci d'avance
[ ![Capture&#95;decran&#95;2016-04-08&#95;a&#95;11&#95;49&#95;53.png](/forum/attachment/30518) ](/forum/attachment/30518 "...a&#95;11&#95;49&#95;53.png")

- [ ![Capture&#95;decran&#95;2016-04-08&#95;a&#95;11&#95;49&#95;53.png](/forum/attachment/30518) ](/forum/attachment/30518 "...a&#95;11&#95;49&#95;53.png") [ ](/forum/attachment/30518?download=1 "...a&#95;11&#95;49&#95;53.png")

Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzUtc3VwcG9ydC1lbi1mcmFuY2Fpcy1mcmVuY2gtc3VwcG9ydC0vODc5MDM1LWltYWdlLW1pbmlhdHVyZS1lbi1yZXNwb25zaXZlP3RtcGw9bWFya2Rvd24=) or [Create an account](/component/users/registration?Itemid=101) to join the conversation.

Board Categories HikaShop- Install &amp; Update- Product &amp; Category Display- Content Creation- Sales and Orders- - Orders management- - Reports &amp; Statistics- Customers- Checkout- Payment Methods- Shipping Methods- Import &amp; Export (CSV, XLS…)- Specific Features- - Affilation- - Taxes- - Wishlist- - Vote- - Carousel &amp; Slider- - Mass Actions- - Filters &amp; Search- - Discount &amp; 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.236 seconds

[Powered by](/forum/credits) [Kunena Forum](https://www.kunena.org)

[](#top)
