Responsive card design using flexbox and media query
Solution retrospective
Although it seems easy, it took a lot of time and effort to specifically set the media query at max-width: 376px to ensure that the card layout behaves responsively. Because of the bem-css naming convention, which I used in this project, it is much simpler to read and debug the code. Despite the time commitment, it was worthwhile. The font-weights, font-families, and colors all have their own custom variables that I first set up. The layout was then constructed using Flexbox, and where necessary, margins and paddings were added. It was an excellent experience all around.
Please log in to post a comment
Log in with GitHubCommunity feedback
- @AgataLiberska
Hi Shahid! Card is looking nice :)
One thing I would advise is to simply start with the mobile design instead of using max width media queries here. It's simply easier (mobile designs are usually simpler) and allows for fewer lines of css. For example on mobile, the image sits on top of the text container - which you achieve by setting
flex-direction:columnbut if you started from mobile and added display flex at 400px and wider, this wouldn't have ben necessary at all because those elements just sit on top of each other by default.Another thing is that 378px is not really enough space for the card to display nicely, so I would move that query up to 400, maybe 450px?
And lastly, for accessiblity, the image of the perfume definitely needs and alt text and you're also missing a <main> landmark :) and for more semantic html, <article> tag is perfect for cards like this
Hope this helps :)
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