Problème de cadrage de fiche produit ou module

Bonjour à toutes et à tous

Je n'arrive pas à modifier le cadrage des fichies produits sur une page.
Le cadre est toujours situé à gauche alors que je voudrai si possible que les fiches produits soient
au centre.

Image 34 ou 36
On constate que les écartements entre le point 3 et le point 4 de l'image 34 sont différents.
identique dans la page WEB (image 36)
J'ai testé la modification ou ajout de CSS dans un CSS personnalisé mais sans modifier le résultat d'affichage.

Pourriez vous m'aider je n'ai plus d'idée de solution.
En vous remerciant pas avance.

Bonjour,

Pourrai-je avec un lien vers la page en question afin d'analyser le CSS ?

Merci.

Merci pour votre aide.

Je vous transmets plusieurs liens car cela se produit sur toutes les pages contenant des produits et module de bas de page.

j'ai aussi testé avec le css par défaut de la version 2.1.0 et l'affichage est identique.

Lien page 1
Lien page 2

Bonjour,

Merci d'essayer la propriété:

.hikashop_category_information_menu_216 .hikashop_products div{
    width:33% !important;
}
.hikashop_category_information_menu_216 .hikashop_products{
    padding-left: 6px !important;
}

Bonjour à tout le monde,

je vous remercie pour votre réponse mais malheureusement cela ne fonctionne pas.
aucune modification dans l'affichage.

En outre je pense que votre proposition est valide si on utilise un affichage de 3 produits sur toutes les pages d'un site.
pour 2 par exemple on aurait que 66 % d'utilisé.

par contre j'ai aussi trouvé cela
en utilisant dans le CSS
.hikashop_product{
width:33% !important;
}
on obtient bien une présentation sur 99 % de la place prévue.

et si on va plus loin
.hikashop_product_column_1 {
width:34% !important;
}
.hikashop_product_column_2 {
width:33% !important;
}
.hikashop_product_column_3 {
width:33% !important;
}
Cela permet d'avoir une utilisation à 100% de la place.

Mais cela provoque un affichage décalé si on utilise dans plusieurs pages un nombre d'affichages différents.
voir image 37
et cela n'est ce que je veux faire.

Si on choisi de modifier l'affichage d'une page à une autre et bien la troisième colonne n'est pas affichée à coté de la seconde mais en dessous.

Je pense que le problème d'affichage ne peut trouver la solution dans le CSS mais dans le fichier PHP qui affiche les produits.

QUESTION : pourriez vous m'indiquer quel est le moyen utilisé pour calculer le pourcentage des colonnes. ?

PS: pour ceux qui veulent récupérer la proposition de Xavier (merci à lui) ATTENTION il manque un [ ! ] point d’exclamation à la ligne width ::33% !

En vous remerciant.

Merci d'avoir signalé le "!" manquant, je l'ai ajouté ainsi que les "." devant les classe "hikashop_products", c'est d'ailleurs sûrement pour ce la que le code ne fonctionnait pas.
Vous pouvez essayer à nouveau le CSS de mon post précédent.

Il est limité sur la classe "hikashop_category_information_menu_216" donc les changements ne s'appliqueront que sur ce module précis et pas un autre. Votre affichage ne sera donc pas cassé.
L'inconvénient est qu'il faut répéter ce code pour tous les modules concernés.

Bonjour à tout le monde,

pas de problème, d'ailleurs je n'avais pas vu non plu le point manquant.

J'ai fais plusieurs tentatives mais cela ne fonctionne pas.
Par contre je me pose la question suivante

hikashop_category_information_menu_216 est un ID et non une classe ??
cela pourrait avoir une incidence sur l'écriture du cSS

j'ai fais les tentatives suivantes
.hikashop_category_information_menu_216 .hikashop_products div{
width:33% !important;
}
.hikashop_category_information_menu_216 .hikashop_products{
padding-left: 6px !important;
}
pas de changement
#hikashop_category_information_menu_216 .hikashop_products div{
width:33% !important;
}
#hikashop_category_information_menu_216 .hikashop_products{
padding-left: 6px !important;
}
Par contre l'affichage est horrible...
j'ai recherché aussi sur le net mais par trouvé de test à faire qui soit probant.

Autre question tout en haut de mon fichier CSS est inscrit la version
* @version 2.0.0
alors que je suis en 2.1.0
peut être une incidence. ?

Merci d'avance de votre aide, moi je coince un peu là...

Et tout simplement en élargissant la div avec l'id "#hikashop_category_information_menu_216" pour avoir quelque chose comme:

#hikashop_category_information_menu_216{
    width: 695px !important;
}

Bonjour à tout le monde,

Votre réponse a résolue en partie mon problème d'affichage.
Le module du bas ayant un ID identique à chaque page j'ai créé le CSS avec une largeur correspondante.

Par contre pour les autres pages votre proposition fonctionne mais il faut créer autant de CSS qu'il existe de ID.
Et cela devient vraiment contraignant pour les nouvelles pages créée.

Je suis donc preneur d'autres idées.
Je cherche aussi de mon coté bien sur...

en vous remerciant.