Page produits - affichage étrange

Bonjour à tous,

j'utilise joomla 3.6.5 ainsi que la dernière version de virtuemart 3.0.18

En vérifiant que la partie boutique du site s'adaptait bien aux tablettes et portables j'ai remarqué que les pages contenant plus de 3 produits s'affichaient bizarrement. En effet :
- en 960 px j'ai 3 produits par ligne
- en 768px j'ai les deux premiers produits sur la première ligne puis la ligne suivante affiche le troisième produit et sur la ligne d'après j'ai les produits 4 et 5.
- en 480 px je n'ai plus qu'un produit par ligne.

Ma question : comment faire pour qu'entre 768px et 480 px, le troisieme produit et le quatrieme s'affiche sur la même ligne ?

J'ai remarqué que le problème ne se posait pas avec la page des catégories. En réduisant la largueur de l'ecran j'ai d'abord 3 catégories par ligne, puis 2 puis enfin une.

Merci d'avance pour votre aide.

Il y a une règle CSS min-width pour les produits qui perturbe le CSS responsive.
Le plus simple est de la supprimer i vous n'utilisé pas des options du panier utilisant des listes.

Bonjour Studio42,

Merci pour votre réponse. j'ai trouvé la min-width dans div.product mais même lorsque je la supprime j'ai le produit 4 ne se met pas à coté du produit 3 en fait rien ne change étrangement.
J'ai beau chercher je ne trouve comment faire remonter ce maudit produit
Une autre suggestion ?

Si vous donnez un lien vers votre site, je peux éventuellement regarder la règle a ajouter

Bonjour Studio42,


Vous pourrez constater que le produit eco au lieu d'être à coté du suivant est sur la ligne suivante. Avez-vous une idée de la modif à faire pour que en mode portrait les produits se placent à la suite les uns des autres avec deux produits /lignes en conservant le 3 produits/ligne en mode paysage.

Le plus gros soucis est:En supprimant ces régles comme ici et en supprimant aussi la régléet en enlevant la régle min-width cela fonctionne.
J'ai déjà signalé aux dev sur le forum que les réglés en place sur le CSS de VM est pas responsive(enfin est responsive à 50%) mais sans réponses depuis.
Note: il faut desactivé ces régles selon la taille par ex. 800px avec un media query, pas pour l'affichage normal.

Merci pour les règles à modifier bon pour la partie .clear, br.clear si je mets clear:none; cela devrait le désactiver bien mais comment désactive-t-on le display:flex et justify-content:flex-start;
pour flex-wrap j'imagine que si je le met à nowrap cela devrait fonctionner

donc en gros j'ajoute la règle suivante :

@media (max-width: 959px) {
div[class*="-view"] .row {
display: flex;
flex-wrap: nowrap;
justify-content: flex-start;
float:none;
}
.clear, br.clear {
clear: none;
}
}
car si je mets quelque chose comme
@media (max-width: 959px) {
div[class*="-view"] .row {
/*display: flex;
flex-wrap: wrap;
justify-content: flex-start;
float:left;*/
}
.clear, br.clear {
/*clear: both;*/
}
div.product{
/*min-width:220px;*/
}
}
je ne suis pas sure que cela soit pris en compte.

Les CSS sont commentés pour les désactiver et voir le résultat sur le site, mais bien sur au final il faut faire des overides.
Par exemple :ajouté aprés dans un autre fichier en général custom.css ou le supprimerDonc il faut juste remettre les valeurs par défaut pour annuler ceux existant avant
SInon copier le CSS de virtuemart dans votre template/css/ et faite vos modification est encore plus simple car on à implémenté dans VM l'overide depuis longtemps si le fichier existe dans le template.

Merci Studio42 pour votre réponse.
J'ai testé tout ça en local et cela a l'air de fonctionner puisque tous mes produits sont désormais à la suite des uns des autres en colonne et non plus deux puis un puis deux puis un par ligne.
Par contre ils sont tous sur une seule colonne et non plus sur deux. Est-ce normal ? Car sur un écran de 900px un seul produit par ligne ça fait un peu vide.
Une idée de ce que je dois ajouter pour que les produits entre 480px et 900px soient tous deux par ligne ? à partir de 480 px ils sont plus que un par ligne et tout fonctionne nickel et au dessus de 900px ils sont trois par lignes et tout est également parfait.

Je ne peut pas vous dire, car sur le site, l'ancien code est encore en place