Design comparison
Solution retrospective
is @media only screen and (max-width: ...px) {} best practice for handling smaller size screens or is there another way?
Community feedback
- @elaineleungPosted over 2 years ago
Well done completing your second challenge here! Regarding your question, I would say that if you're using
max-width: ...px
in your media query, then I suppose you are currently approaching your design from the desktop view and then use a media query for smaller sizes. If that is the case, try doing it the other way around where you start mobile first and then use a media query for the larger sizes when you need to. I do think it's possible to not use media queries depending on the design and situation. What I normally do is use responsive properties such asmax-width
andmin-width
instead of fixed widths. I also second Davina's idea of usingclamp()
as that is something I use quite a lot.One comment I have about your solution is that, in the start instead of having a question mark, either hide that title area completely or have a loading screen. Good job once again, and keep going :)
0 - @davinaleongPosted over 2 years ago
Instead of media queries, you can try
clamp()
.Syntax:
clamp(<min value>, <ideal value>, <max value>);
You can mix units too!
Kevin Powell explains clamp pretty well in this video.
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