Using flex-wrap and media querys for responsiveness
Design comparison
Solution retrospective
In my solution, I used an intermediate stage of responsiveness between the desktop version and the mobile version, where two cards are next to each other in the same line and the third one goes down. For this, I used the flex-wrap property and some media querys.
As there was no indication about the behavior on medium-sized screens, I had to adapt to what I thought was best.
In your opinion, what would be the best practice in these cases?
Community feedback
- @Ging3rmintPosted over 2 years ago
The best way to handle this sort of design is to use flex grow, shrink and width (shorthand, flex: 1 1 100%). let the flex box handle the width of the cards so that in tablet view, the 3rd card will have a width of 100%.
Marked as helpful0@r-mayerPosted over 2 years ago@Ging3rmint Interesting!! Thanks a lot, i will try that.
0
Please log in to post a comment
Log in with GitHub
Join our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord