Problème de redimentionnement des images dans la vue listing div

  • Posts: 11
  • Thank you received: 1
  • Hikashop Essential
2 years 4 months ago #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

Attachments:

Please Log in or Create an account to join the conversation.

  • Posts: 4519
  • Thank you received: 612
  • MODERATOR
2 years 4 months ago #337954

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


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 :
#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 , 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: 2 years 4 months ago by Philip.

Please Log in or Create an account to join the conversation.

  • Posts: 11
  • Thank you received: 1
  • Hikashop Essential
2 years 4 months ago #337959

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

Attachments:

Please Log in or Create an account to join the conversation.

  • Posts: 4519
  • Thank you received: 612
  • MODERATOR
2 years 4 months ago #337961

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: 2 years 4 months ago by Philip.

Please Log in or Create an account to join the conversation.

Time to create page: 0.075 seconds
Powered by Kunena Forum