Bonjour tout le monde,

J'ai créer une page avec des card bootstrap (1ere photo en version PC, 2eme en version mobile) et je n'arrive pas a les rendre responsive en version mobile (j'aimerai qu'il y'en ai qu'une d'affichée lors du scroll)

J'ai déja intégrer la balise Meta Viewport dans mon header, et je ne sais quoi insérer dans les media queries pour afficher une seule card en mobile lors du scroll et qu'elles soient adaptées.

Merci d'avance

 

Slt c'est normal car tes card son en en 

display : flex; 

Il faut que tu ajoute, pas besoin de le mettre dans les media queries ->

flex-flow: row wrap;

Et la normalement tu devrais avoir tes card comme tu le souhaite.

-
Edité par SwenDeBentzmann 29 janvier 2020 à 11:31:48

J'ai essayer de rentrer ce code dans une balise style mais je ne vois pas de difference, je dois bien le mettre a cet endroit a l'interieur de mon php?

Essaye de le mettre dans la div qui contient toutes tes cards sinon regarde si il n'y pas une classe bootstrap qui s'occupe de ça.

Désolé je me suis peut etre mal exprimé, 

ma classe "row" incorpore déja un flex-wrap car sur l'image ci dessus les cards apparaissent 3 par 3 et ne sont pas toutes a la ligne.

En revanche ce que je souhaite c'est modifier la taille des cards lorsqu'elles apparaissent en mode mobile afin que le flex-wrap les aligne 1 par 1

Donc si je comprend bein ce que tu veux c'est faire en sorte que quand c'est en mode mobile les cards soit affichées les unes en dessous des autres.

Il faut que tu utilise justement le flex-flow : row wrap c'est cette propriété qui se charger de les aligner selon ce que tu veux, regarde sur la doc https://developer.mozilla.org/fr/docs/Web/CSS/flex-flow

Moi j'ai déjà eu le problème que tu as et j'ai en recherchant utilisé flex-flow: row wrap;

Sinon regarde au niveau des flex dans bootstrap tu devrais trouver ta réponse -> https://getbootstrap.com/docs/4.0/utilities/flex/

-
Edité par SwenDeBentzmann 29 janvier 2020 à 15:07:06

Problème résolu ! En fait je devais juste mettre un col-lg-4 pour que les cards gardent leurs tailles et ainsi puissent se mettre les une en dessous des autres ! 

Merci