Partage
  • Partager sur Facebook
  • Partager sur Twitter

Card bootstrap responsive

Sujet résolu
    29 janvier 2020 à 11:25:31

    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

     

    • Partager sur Facebook
    • Partager sur Twitter
      29 janvier 2020 à 11:30:48

      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

      • Partager sur Facebook
      • Partager sur Twitter
        29 janvier 2020 à 12:26:08

        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?

        • Partager sur Facebook
        • Partager sur Twitter
          29 janvier 2020 à 13:54:32

          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.
          • Partager sur Facebook
          • Partager sur Twitter
            29 janvier 2020 à 14:46:19

            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

            • Partager sur Facebook
            • Partager sur Twitter
              29 janvier 2020 à 15:05:50

              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

              • Partager sur Facebook
              • Partager sur Twitter
                29 janvier 2020 à 15:22:19

                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

                • Partager sur Facebook
                • Partager sur Twitter

                Card bootstrap responsive

                × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
                • Editeur
                • Markdown