Advice Generator

Solution retrospective
is @media only screen and (max-width: ...px) {} best practice for handling smaller size screens or is there another way?
Please log in to post a comment
Log in with GitHubCommunity feedback
- @elaineleung
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 :)
- @davinaleong
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.
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