Jump to content
Allo-Flock

Bug Affichage : Liste Produit / Liste Catégorie

Recommended Posts

Bonjour,

Ayant changé de thème Prestashop récemment j'ai quelques problème d'affichages sur ma boutique.

Liste des produits : Je me retrouve avec des sauts de lignes et donc certaines lignes n'ont qu'un seul produit.

Liste des Catégories : Je me retrouve avec des sauts de lignes et donc certaines lignes n'ont qu'une seule catégorie.

J'ai vu que plusieurs d'entre vous avait rencontré le même problème et ai lu plusieurs topic.

Je sais donc que cela vient du Thème, qu'il faut que je modifie le fichier "product-list.tpl" seulement voilà que dois-je modifier ? Et surtout à quelle ligne ?

Voici le lien de ma boutique : www.espaceclubs.com
Lien bug catégorie : espaceclubs.com/3-boutique-clubs-rugby
Lien bug liste produit : espaceclubs.com/278-aubigny

Par avance merci 

Liste-Categorie.jpg

Liste-Produits.jpg

Share this post


Link to post
Share on other sites

Tu dois forcer un dimension verticale au moins égale à ta vignette la plus haute (min-height: ___px dans ta css)

Ici tu le vois c'est chalons en champagne qui passant sur 2 lignes impose à la vignette de la ligne suivante de rester au bord

Share this post


Link to post
Share on other sites

ou pour être compatible multi-support:

Conteneur:

ul.your_class {
  display: flex;
  flex-wrap: wrap;
}

Contenant (par sécurité):
li.your_other_class {
    display: table-cell;
}

Verifier si body{height:100%}

Share this post


Link to post
Share on other sites

Tout d'abord merci pour vos réponses, ça fait toujours du bien de se sentir soutenu.

Donc si je comprend bien, toutes mes modifications sont à faire non pas dans les tpl mais dans les css ?

 

En réponse à doekia :

"Ici tu le vois c'est chalons en champagne qui passant sur 2 lignes impose à la vignette de la ligne suivante de rester au bord"

Je ne comprends pas pour Chalon, c'est à cause de la dimension de l'image ou la longueur du titre de la catégorie que ça saute ?

 

Du coup je suis dans theme/category.css 

Déjà suis-je au bon endroit ?

Dans la css je vois une section "Categories Page Styles" et dans cette section je ne vois pas de texte écrit "(min-height:)  j'ai pourtant utiliser l'outil recherche.

 

En réponse à Eolia :

La compatibilité multi-support me parait être la bonne solution.

Seulement à quelle ligne dois-je entrer les valeurs demandé ? (toujours dans la css j'imagine ?)

 

J'ai bien fait une copie des fichiers originaux afin de ne rien "casser".

Share this post


Link to post
Share on other sites

justement il n'y a pas de directive min-height, à toi de l'ajouter.

par exemple sur cette directive:

#subcategories ul li {
    float: left;
    margin: 5px 8px;
    text-align: center;
    width: 18%;
    min-height: 195px;
}

Pour mieux savoir où faire les changements, désactiver le CCC sur les feuilles de style et ensuite utiliser la console de ton navigateur

Share this post


Link to post
Share on other sites

il est préférable d'ajouter ces lignes dans le product-list.css vu que c'est lui qui gère toutes les grilles de produits^^

Share this post


Link to post
Share on other sites

Désolé de vous répondre si tardivement, je cherchais à trouver comment m'en sortir à partir de vos réponses.

ça a porté ses fruits pour la modification du "category.css" donc un très grand merci à vous !

J'ai ajouté la ligne de code donné par doekia et tout roule pour les catégories.

Seulement maintenant je sèche du côté du "produc_list.css" je n'arrive pas à trouver la ligne en question.
C'est le même fonctionnement que pour le "category.css" j'imagine ? Il suffit d'ajouter la ligne ?

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×
×
  • Create New...

Important Information

Cookies ensure the smooth running of our services. Using these, you accept the use of cookies. Learn More