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 :
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