Shrinking Cards - How do I fix and make them Responsive?

Tell us what’s happening:

I am trying to make my cards responsive and maintain the same size regardless of screen size but collapse into a vertical column when the size shrinks. But my cards are shrinking as the screen shrinks. Any advice on how I should approach this?

https://codepen.io/Shukri-Isse/pen/WbNKZvr

Your code so far

<!-- file: index.html -->

/* file: styles.css */

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/18.2 Safari/605.1.15

Challenge Information:

Product Landing Page - Build a Product Landing Page

Did you try using flex-wrap: wrap on the flex container?

1 Like

Yes this worked! I don’t know why I didn’t try that sooner, thanks!