[Skip to main content](#vessel-content) # Problème de redimentionnement des images dans la vue listing div ## - **[TM](/forum/user/63332-tm "View TM's Profile")** - [![TM's Avatar](https://www.hikashop.com/media/kunena/core/svg/person.svg)](/forum/user/63332-tm "View TM's Profile") Topic Author - [ Offline](/forum/user/63332-tm) Less More - Posts: 14 - Thank you received: 1 - - 4 years 10 months ago [\#337933](#337933) by [TM](/forum/user/63332-tm "View TM's Profile") *[Problème de redimentionnement des images dans la vue listing div](/forum/5-support-en-francais-french-support-/903659-probleme-de-redimentionnement-des-images-dans-la-vue-listing-div#337933 "-- HikaShop version -- : 4.4.4 -- Joomla version -- : 4.0.4 -- PHP version -- : 8.0 -- Browser(s) name and version -- : firefox 95 Bonjour, La taille des images dans les blocs est fixée en pixels Dans la vue Listing Div, Si la largeur de l'écran est inférieure à la largeur de l'image + les marges du bloc qui la contienne, elle sort du bloc ( ce n'est pa le cas dans la vue detail). Si on fixe la largeur maximale du bloc parent à 100% (.hikashop_hover_img > a {max-width: 100%;} afin d'éviter qu'elle ne déborde, la gestion de l'image qui apparait en hover ne fonctionne plus : les deux images sont en position relative, et se superposent grâce à la propriété css "top", qu'on fixe à - la hauteur des images. Or si la hauteur des images change dynamiquement (max-width = 100% pour pas qu'elles ne sortent du bloc), la valeur de la propriété "top", n'est elle pas réajustée (toujours = à la hauteur de l'image en pleine taille) Bref, j'ai du mal à me sortir de ce guêpier et je sollicite votre aide ... Bien cordialement TM")* was created by *[TM](/forum/user/63332-tm "View TM's Profile")* -- HikaShop version -- : 4.4.4 -- Joomla version -- : 4.0.4 -- PHP version -- : 8.0 -- Browser(s) name and version -- : firefox 95 Bonjour, La taille des images dans les blocs est fixée en pixels Dans la vue Listing Div, Si la largeur de l'écran est inférieure à la largeur de l'image + les marges du bloc qui la contienne, elle sort du bloc ( ce n'est pa le cas dans la vue detail). Si on fixe la largeur maximale du bloc parent à 100% (.hikashop_hover_img > a {max-width: 100%;} afin d'éviter qu'elle ne déborde, la gestion de l'image qui apparait en hover ne fonctionne plus : les deux images sont en position relative, et se superposent grâce à la propriété css "top", qu'on fixe à - la hauteur des images. Or si la hauteur des images change dynamiquement (max-width = 100% pour pas qu'elles ne sortent du bloc), la valeur de la propriété "top", n'est elle pas réajustée (toujours = à la hauteur de l'image en pleine taille) Bref, j'ai du mal à me sortir de ce guêpier et je sollicite votre aide ... Bien cordialement TM - [ ![Screenshot2021-12-12at11-16-38Vinsblancs.png](/forum/attachment/54033) ](/forum/attachment/54033 "...Vinsblancs.png") [ ](/forum/attachment/54033?download=1 "...Vinsblancs.png") Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzUtc3VwcG9ydC1lbi1mcmFuY2Fpcy1mcmVuY2gtc3VwcG9ydC0vOTAzNjU5LXByb2JsZW1lLWRlLXJlZGltZW50aW9ubmVtZW50LWRlcy1pbWFnZXMtZGFucy1sYS12dWUtbGlzdGluZy1kaXY/dG1wbD1tYXJrZG93bg==) or [Create an account](/register) 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: 654 - - 4 years 10 months ago - 4 years 10 months ago [\#337954](#337954) by [Philip](/forum/user/34318-philip "View Philip's Profile") Replied by *[Philip](/forum/user/34318-philip "View Philip's Profile")* on topic *[Problème de redimentionnement des images dans la vue listing div](/forum/5-support-en-francais-french-support-/903659-probleme-de-redimentionnement-des-images-dans-la-vue-listing-div#337954 "-- HikaShop version -- : 4.4.4 -- Joomla version -- : 4.0.4 -- PHP version -- : 8.0 -- Browser(s) name and version -- : firefox 95 Bonjour, La taille des images dans les blocs est fixée en pixels Dans la vue Listing Div, Si la largeur de l'écran est inférieure à la largeur de l'image + les marges du bloc qui la contienne, elle sort du bloc ( ce n'est pa le cas dans la vue detail). Si on fixe la largeur maximale du bloc parent à 100% (.hikashop_hover_img > a {max-width: 100%;} afin d'éviter qu'elle ne déborde, la gestion de l'image qui apparait en hover ne fonctionne plus : les deux images sont en position relative, et se superposent grâce à la propriété css "top", qu'on fixe à - la hauteur des images. Or si la hauteur des images change dynamiquement (max-width = 100% pour pas qu'elles ne sortent du bloc), la valeur de la propriété "top", n'est elle pas réajustée (toujours = à la hauteur de l'image en pleine taille) Bref, j'ai du mal à me sortir de ce guêpier et je sollicite votre aide ... Bien cordialement TM")* Bonjour, Je vais vous suggérer une méthode pour la prochaine fois que vous aurez ce type de problème, là j'ai mis le doigt sur le problème mais que je le trouve aussi vite tiens un peu de la chance, voyez ma screenshot pour bien comprendre mes points : [ ![alt](https://i.ibb.co/SXP0Gkf/css-custom.png) ](https://i.ibb.co/SXP0Gkf/css-custom.png "alt") La méthode consiste à faire un test avec **un template par défaut** comme ProtoStar, afin "d'extraire" les ajouts venant du template et autre css pour voir si cela corrige l'erreure d'affichage. Cette technique nous permet de "faire l'entonnoir" pour aller plus vite au cause du problème. Voilà pour notre gain de temps pour un eventuel futur problème d'affichage, maintenant la solution pour votre probléme actuel : - Voilà ce que j'ai trouver un peu par chance : Code: \#hikashop_category_information_menu_542 div.hikashop_container { margin: 20px 20px; } **=>** Ce code css "*compresse*" latéralement votre container, ce qui explique que votre image débord elle même de son cadre. De là, je vois **2** besoins et donc **2** solutions : **1.** Vous ne voulez finalement pas du tout ce code, car la pertinence me semble discutable pour la largeur, et alors ajoutez ce genre de code **css pour "contrer" ce code :** **\#hikashop\_category\_information\_menu\_542 div.hikashop\_container { margin: 20px 0px !important; *// Commande margin : marge en haut ET en sur les cotés, suivit du important pour overrider la commande incorrecte;* }** **Note :** Voyez ce **[ documentaire](https://www.hikashop.com/support/documentation/272-hikashop-display-by-color.html#custom)**, pour voir comment ajouter de css custom dans vos fichiers Frontend. **Ou bien :** **2.** Vous voulez pour une raison qui m'a échappé conserver cette commande Css, et alors je vous recommande de la conditionner à la taille de votre écran en utilisant la commande @media, au moment nécessaire, que j'estime autour des 600px comme suivant : **@media (max-width: 600px) { \#hikashop\_category\_information\_menu\_542 div.hikashop\_container { margin: 20px 0px !important; *// Commande margin : marge en haut ET en sur les cotés, suivit du important pour overrider la commande incorrecte;* } }** En espérant que cela vous permettra de résoudre votre problème d'affichage. Cordialement Last edit: 4 years 10 months ago by [Philip](/forum/user/34318-philip "View Philip's Profile"). Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzUtc3VwcG9ydC1lbi1mcmFuY2Fpcy1mcmVuY2gtc3VwcG9ydC0vOTAzNjU5LXByb2JsZW1lLWRlLXJlZGltZW50aW9ubmVtZW50LWRlcy1pbWFnZXMtZGFucy1sYS12dWUtbGlzdGluZy1kaXY/dG1wbD1tYXJrZG93bg==) or [Create an account](/register) to join the conversation. - **[TM](/forum/user/63332-tm "View TM's Profile")** - [![TM's Avatar](https://www.hikashop.com/media/kunena/core/svg/person.svg)](/forum/user/63332-tm "View TM's Profile") Topic Author - [ Offline](/forum/user/63332-tm) Less More - Posts: 14 - Thank you received: 1 - - 4 years 10 months ago [\#337959](#337959) by [TM](/forum/user/63332-tm "View TM's Profile") Replied by *[TM](/forum/user/63332-tm "View TM's Profile")* on topic *[Problème de redimentionnement des images dans la vue listing div](/forum/5-support-en-francais-french-support-/903659-probleme-de-redimentionnement-des-images-dans-la-vue-listing-div#337959 "-- HikaShop version -- : 4.4.4 -- Joomla version -- : 4.0.4 -- PHP version -- : 8.0 -- Browser(s) name and version -- : firefox 95 Bonjour, La taille des images dans les blocs est fixée en pixels Dans la vue Listing Div, Si la largeur de l'écran est inférieure à la largeur de l'image + les marges du bloc qui la contienne, elle sort du bloc ( ce n'est pa le cas dans la vue detail). Si on fixe la largeur maximale du bloc parent à 100% (.hikashop_hover_img > a {max-width: 100%;} afin d'éviter qu'elle ne déborde, la gestion de l'image qui apparait en hover ne fonctionne plus : les deux images sont en position relative, et se superposent grâce à la propriété css "top", qu'on fixe à - la hauteur des images. Or si la hauteur des images change dynamiquement (max-width = 100% pour pas qu'elles ne sortent du bloc), la valeur de la propriété "top", n'est elle pas réajustée (toujours = à la hauteur de l'image en pleine taille) Bref, j'ai du mal à me sortir de ce guêpier et je sollicite votre aide ... Bien cordialement TM")* Bonjour Philippe, merci pour la réponse. J'ai bien noté la méthode du templates par defaut pour faciliter le debug ( je l'appliquerai pour un prochain site) Par contre j'ai essayé la solution 1 sans succès, l'image déborde toujours (voir pj) Cordialement Thierry - [ ![2021-12-1314_12_14-Vinsblancs.jpg](/forum/attachment/54037) ](/forum/attachment/54037 "...Vinsblancs.jpg") [ ](/forum/attachment/54037?download=1 "...Vinsblancs.jpg") Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzUtc3VwcG9ydC1lbi1mcmFuY2Fpcy1mcmVuY2gtc3VwcG9ydC0vOTAzNjU5LXByb2JsZW1lLWRlLXJlZGltZW50aW9ubmVtZW50LWRlcy1pbWFnZXMtZGFucy1sYS12dWUtbGlzdGluZy1kaXY/dG1wbD1tYXJrZG93bg==) or [Create an account](/register) 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: 654 - - 4 years 10 months ago - 4 years 10 months ago [\#337961](#337961) by [Philip](/forum/user/34318-philip "View Philip's Profile") Replied by *[Philip](/forum/user/34318-philip "View Philip's Profile")* on topic *[Problème de redimentionnement des images dans la vue listing div](/forum/5-support-en-francais-french-support-/903659-probleme-de-redimentionnement-des-images-dans-la-vue-listing-div#337961 "-- HikaShop version -- : 4.4.4 -- Joomla version -- : 4.0.4 -- PHP version -- : 8.0 -- Browser(s) name and version -- : firefox 95 Bonjour, La taille des images dans les blocs est fixée en pixels Dans la vue Listing Div, Si la largeur de l'écran est inférieure à la largeur de l'image + les marges du bloc qui la contienne, elle sort du bloc ( ce n'est pa le cas dans la vue detail). Si on fixe la largeur maximale du bloc parent à 100% (.hikashop_hover_img > a {max-width: 100%;} afin d'éviter qu'elle ne déborde, la gestion de l'image qui apparait en hover ne fonctionne plus : les deux images sont en position relative, et se superposent grâce à la propriété css "top", qu'on fixe à - la hauteur des images. Or si la hauteur des images change dynamiquement (max-width = 100% pour pas qu'elles ne sortent du bloc), la valeur de la propriété "top", n'est elle pas réajustée (toujours = à la hauteur de l'image en pleine taille) Bref, j'ai du mal à me sortir de ce guêpier et je sollicite votre aide ... Bien cordialement TM")* Bonjour, Je viens de retourner sur votre site pour l'analyser, et **je ne vois pas votre nouvelle commande Css** (dans l'inspector tool du navigateur). Du coup, pouvez vous détaillez comment vous avez ajouté la dite commande Css ? Soyez précis & détailler bien tout cela, étape par étape, car souvent dans ce genre de chose le diable se cache dans les détails. En attentes de vos retours pour progresser sur votre sujet. Cordialement Last edit: 4 years 10 months ago by [Philip](/forum/user/34318-philip "View Philip's Profile"). Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzUtc3VwcG9ydC1lbi1mcmFuY2Fpcy1mcmVuY2gtc3VwcG9ydC0vOTAzNjU5LXByb2JsZW1lLWRlLXJlZGltZW50aW9ubmVtZW50LWRlcy1pbWFnZXMtZGFucy1sYS12dWUtbGlzdGluZy1kaXY/dG1wbD1tYXJrZG93bg==) or [Create an account](/register) 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.099 seconds [Powered by](/forum/credits) [Kunena Forum](https://www.kunena.org)