En visitant ce site, vous acceptez l'utilisation de cookies afin de vous proposer les meilleurs services possibles.

Page produits - affichage étrange

Plus d'informations
il y a 9 ans 2 mois #1 par vsmc
Page produits - affichage étrange a été créé par vsmc
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.

Connexion ou Créer un compte pour participer à la conversation.

  • studio42
  • Portrait de studio42
  • Hors Ligne
  • Modérateur
  • Modérateur
  • Dev Joomla & Virtuemart
Plus d'informations
il y a 9 ans 2 mois #2 par studio42
Réponse de studio42 sur le sujet Page produits - affichage étrange
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.

www.st42.fr Truc et astuce Joomla et virtuemart
shop.st42.fr téléchargement Joomla et extension pour virtuemart
Gratuit ! Nettoyage des medias : shop.st42.fr/fr/produits/virtuemart-netoyage-des-medias.htm Nouveau!

Connexion ou Créer un compte pour participer à la conversation.

Plus d'informations
il y a 9 ans 2 mois #3 par vsmc
Réponse de vsmc sur le sujet Page produits - affichage étrange
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 ?

Connexion ou Créer un compte pour participer à la conversation.

  • studio42
  • Portrait de studio42
  • Hors Ligne
  • Modérateur
  • Modérateur
  • Dev Joomla & Virtuemart
Plus d'informations
il y a 9 ans 2 mois #4 par studio42
Réponse de studio42 sur le sujet Page produits - affichage étrange
Si vous donnez un lien vers votre site, je peux éventuellement regarder la règle a ajouter

www.st42.fr Truc et astuce Joomla et virtuemart
shop.st42.fr téléchargement Joomla et extension pour virtuemart
Gratuit ! Nettoyage des medias : shop.st42.fr/fr/produits/virtuemart-netoyage-des-medias.htm Nouveau!

Connexion ou Créer un compte pour participer à la conversation.

Plus d'informations
il y a 9 ans 2 mois - il y a 9 ans 2 mois #5 par vsmc
Réponse de vsmc sur le sujet Page produits - affichage étrange
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.
Dernière édition: il y a 9 ans 2 mois par vsmc.

Connexion ou Créer un compte pour participer à la conversation.

  • studio42
  • Portrait de studio42
  • Hors Ligne
  • Modérateur
  • Modérateur
  • Dev Joomla & Virtuemart
Plus d'informations
il y a 9 ans 2 mois - il y a 9 ans 2 mois #6 par studio42
Réponse de studio42 sur le sujet Page produits - affichage étrange
Le plus gros soucis est:
div[class*="-view"] .row {
    /* display: flex; */
    /* flex-wrap: wrap; */
    /* justify-content: flex-start; */
    /* float: left; */
}
En supprimant ces régles comme ici et en supprimant aussi la réglé
.clear, br.clear {
    /* clear: both; */
}
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.

www.st42.fr Truc et astuce Joomla et virtuemart
shop.st42.fr téléchargement Joomla et extension pour virtuemart
Gratuit ! Nettoyage des medias : shop.st42.fr/fr/produits/virtuemart-netoyage-des-medias.htm Nouveau!
Dernière édition: il y a 9 ans 2 mois par studio42.

Connexion ou Créer un compte pour participer à la conversation.

Plus d'informations
il y a 9 ans 2 mois #7 par vsmc
Réponse de vsmc sur le sujet Page produits - affichage étrange
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.

Connexion ou Créer un compte pour participer à la conversation.

  • studio42
  • Portrait de studio42
  • Hors Ligne
  • Modérateur
  • Modérateur
  • Dev Joomla & Virtuemart
Plus d'informations
il y a 9 ans 2 mois #8 par studio42
Réponse de studio42 sur le sujet Page produits - affichage étrange
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 :
div[class*="-view"] .row {
/*display: flex;
flex-wrap: wrap;
justify-content: flex-start;
float:left;*/
}
ajouté aprés dans un autre fichier en général custom.css ou le supprimer
div[class*="-view"] .row {
display: block;
flex-wrap:: nowrap;
justify-content: flex-start;
float:left;/* ou float:none; ? */
}
Donc 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.

www.st42.fr Truc et astuce Joomla et virtuemart
shop.st42.fr téléchargement Joomla et extension pour virtuemart
Gratuit ! Nettoyage des medias : shop.st42.fr/fr/produits/virtuemart-netoyage-des-medias.htm Nouveau!

Connexion ou Créer un compte pour participer à la conversation.

Plus d'informations
il y a 9 ans 2 mois #9 par vsmc
Réponse de vsmc sur le sujet Page produits - affichage étrange
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.

Connexion ou Créer un compte pour participer à la conversation.

  • studio42
  • Portrait de studio42
  • Hors Ligne
  • Modérateur
  • Modérateur
  • Dev Joomla & Virtuemart
Plus d'informations
il y a 9 ans 2 mois #10 par studio42
Réponse de studio42 sur le sujet Page produits - affichage étrange
Je ne peut pas vous dire, car sur le site, l'ancien code est encore en place

www.st42.fr Truc et astuce Joomla et virtuemart
shop.st42.fr téléchargement Joomla et extension pour virtuemart
Gratuit ! Nettoyage des medias : shop.st42.fr/fr/produits/virtuemart-netoyage-des-medias.htm Nouveau!

Connexion ou Créer un compte pour participer à la conversation.