1485 sujets

Web Mobile et responsive web design

[Résolu] Décalage blocs listing produit en version mobile

Bonjour à tous,

Je suis en train de faire des modifs css pour améliorer la version mobile d'un listing produits (CMS prestashop) que j'ai passé en 2 colonnes (au lieu d'une seule).

Voici la page sur laquelle je bosse :
https://www.bougies-la-francaise.com/7-promotions

Mon problème est que, en version mobile, soit à partir de 479px de largeur de fenêtre :

- Lorsque le bloc produit de la colonne de gauche est plus haut que celui de droite, ça fait sauter le bloc produit censé se trouver dessous en le décalant à droite et en laissant un grand vide à la place :
upload/1573565883-77768-screenshot1.png

- Lorsque c'est le bloc produit de la colonne de droite qui est plus haut que celui de gauche alors tout fonctionne normalement, les blocs du dessous se comportent correctement en ne laissant aucun vide :
upload/1573565960-77768-screenshot2.png

J'ai beau cherché je ne comprends absolument pas pourquoi ce problème apparaît..

Auriez-vous une idée ? J'ai qques bases en intégration html/css mais je suis loin d'être expert, peut-être qu'une personne avec une plus grande connaissance saura m'aider ?

Merci d'avance pour vos précieuses réponses !
Modifié par Aboudri (12 Nov 2019 - 14:57)
Administrateur
Hello,

Le problème vient du positionnement flottant de tes éléments de liste (qui lui-même est dû au choix de grille Bootstrap).

J'ai une solution, trouvée rapidement et qui nécessite bien-entendu des tests et sans-doute des adaptations : il suffit de passer l'ensemble de cette liste en Flexbox.

Concrètement cela donnerait : 


.product_list {
    display: flex;
    flex-wrap: wrap;
}


Je n'ai testé qu'avec l'inspecteur d'élément, mais cela semble faire le job dans un premier temps.
Modifié par Raphael (12 Nov 2019 - 15:12)
Meilleure solution
Aaarg..

Désormais j'ai un bug sur le 1er et le dernier produit du listing. Les produit sont seuls sur leurs lignes et laisse un espace vide à la place du produit censé être à côté.

Chose bizarre, ce n'est visible que sur un vrai device mobile, depuis l'inspecteur en redimensionnant ou en simulation mobile le problème n'apparaît pas...

Comment faire dans ces cas là ? car je ne peux même pas inspecter la chose puisque le bug n'apparaît pas via mon navigateur pc.. Smiley decu

https://www.bougies-la-francaise.com/331-the-enchante

upload/1573570920-77768-img7611.png
Bonjour Aboudri, tu as testé sur quel device ? Pour ma part j'ai testé sur un S8 et RAS, aucun bug d'affichage.
Bonjour Friesstyle,

Merci pour ton message.

Le bug apparaît sur un iphone 7.
J'ai également pu essayer sur un Huawei Mate 20pro et effectivement là, le bug n'existait pas.

En regardant à l'oeil nu sur mon iphone 7, j'ai remarqué que le bloc de mon premier produit était un poil décalé à droite ce qui poussait le second bloc sur la ligne du dessous. Pour quelle raison ? je n'ai jamais pu trouver.

Quoi qu'il en soit, j'ai corrigé le problème en appliquant un width=49% sur mes 2 colonnes en version mobile, ce qui laisse une marge de 2% et évite ainsi que la largeur d'un bloc pousse l'autre sur la ligne du dessous..
Modifié par Aboudri (13 Nov 2019 - 14:43)
Ok c'est étrange. Vu que tu appliques une width: 49% je te conseille de faire passer ton flex en justify-content: space-between afin d'éviter qu'on voit le petit décalage vers la gauche du second bloc de la ligne Smiley smile .
Sujet clos
Aller à