Design comparison
Solution retrospective
need help with media query
Community feedback
- @NicholasAnichPosted almost 2 years ago
Hello! 🤗 First off, great job so far!
Noticed you're using max-width for media queries, which is fine. However, doing media queries I've found it's easier to do a mobile first approach and use min-width.
example:
@media (min-width: 37.5em) { // do something for tablet here... } // 600px(screen size) / 16px (root font-size)
https://css-tricks.com/a-complete-guide-to-css-media-queries/
I know it can be preference but the big take away is sometimes you don't have to style as much for mobile as you would with other screen sizes since it's already responsive. Again, max-width (You could even use both!) is fine but you'll save yourself a ton of work by doing a mobile first approach. 😋
Also, I noticed you're linking these huge font files with many weights when you only need 3. Only pick the font weights needed for the project to reduce file size unless you're trying to have it be a variable font.
This is all you need really for the project specs:
<link href="https://fonts.googleapis.com/css2?family=Big+Shoulders+Display:wght@700;800&family=Open+Sans&family=Poppins:wght@400;600&display=swap" rel="stylesheet">Anyways, sorry for the long comment. Great job and keep it up! :D
1
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