Design comparison
Solution retrospective
I struggled to get the sizing right. When I finally did for mobile, and switched to desktop. Then it was challenging all over again. I read after completing this, that rem is better for font size and px is better for margin/padding. If I took this approach, would perhaps it make things a little simpler when switching screen sizes?
This is my first project with SASS/SCSS. Any best practice recommendations are welcome.
Thank you for your time in reviewing this and your constructive feedback.
Community feedback
- @ApplePieGiraffePosted over 2 years ago
Hello, Nick! 👋
Nice work on this challenge! 🙌
I would suggest perhaps not putting your media queries in a separate file in your Sass files. Splitting your styles down into separate files is a good idea, but it might be slightly annoying/tedious to switch back and forth between two files to tweak styles for the same element(s) and placing all (or most) of your styles for a particular element in the same place may give you a better idea of what's happening in your code (especially for a smaller project such as this, where it makes a lot of sense to group styles together in that way).
Also, the reason specifying values such as `margin`, `padding`, `font-size`, and more in a responsive unit such as `em` or `rem` (not `px`, which is a fixed unit) is a good idea is to ensure that changing the font-size of the document causes the rest of the site to scale up/down (which is important for accessibility reasons). To learn more about `em` and `rem`, see this helpful article.
Hope this helps. 😊
Keep coding (and happy coding, too)! 😁
Marked as helpful2@NickTalvyPosted over 2 years ago@ApplePieGiraffe thank you for your feedback. What you said makes sense. The article was also helpful. Thanks again!
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