@NicholasAnich
Posted
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
