Responsive Card Component Using Media Queries

Community feedback

• 

  Elaine•11,400

  @elaineleungPosted over 2 years ago

  Hey Anthony, yes, it's actually possible to make a responsive card component using flexbox and no media queries. What you need is to use flex-wrap: wrap and also to specify the flex properties on the children (which in this case are the image and card text content), and lastly, add a max-width on the card for responsiveness if you need (you probably do). I just wrote up a CodePen to show you how this can be done: https://codepen.io/elaineleung/pen/gOexjKQ.

  Hope this gives you some ideas on what you can do, and happy experimenting!

  1
• 

  Lucas 👾•104,340

  @correlucasPosted over 2 years ago

  Hello Anthony Gedeon, congrats for you solution!

  I saw that you asked about the media querie for this challenge, but looking you live site I can see that you already fixed it with flex-direction: column in addition you can insert on your media query the mobile font-size for h1 is around 24px and for the paragraph is 12px, to have a better behavior with the hero image you can use inside the img on css the properties object-fit: cover; and object-positon: center;

  Keep it up and happy coding, well done!

  0