Design comparison
Solution retrospective
I found it difficult to create different break points for the mobile and desktop version. I still have trouble with which break points to use how to apply them.
Community feedback
- @pengpongpongPosted almost 2 years ago
If you open responsive design mode in your browser (dev tools) you can resize the window with your mouse or enter a specific resolution to see how your website behaves with different breakpoints. If you have for example a website for mobile devices and you want a desktop version for it, you could resize the window and make it bigger until your design begins to "break". That's where you could choose you approx. breakpoint and add some media queries so your website looks nice again. Also try to use more
rem
andem
(in media queries) units instead ofpx
, so that your website can scale up with resolution. It would minimize the amount of media queries needed.Also use
section
tag for your.card-container
class andfooter
tag for your.attribution
class for a more semantic approach and wrap your content in amain
tag.I hope this helps and don't hesitate to ask.
Marked as helpful1@dev-ele206Posted almost 2 years ago@pengpongpong Hey Phuong, thank you so much for the feedback! I appreciate it. I'll be sure to use rem and em in media queries for my next project.
0
Please log in to post a comment
Log in with GitHubJoin 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