Mobile first landing page using CSS Grid and Flexbox

Solution retrospective
Did I follow best practices for resetting my margins and by only adding margin to the bottom of elements?
What's the best practice for using rems, ems and px? I used rems for most things and px for the rest. The only place I used ems was on the padding for my buttons so that the size of the button would change proportionately if the font size was changed. How can I use rems, ems or px to make the code more accessible?
Please log in to post a comment
Log in with GitHubCommunity feedback
- @imparassharma
I generally use vh or vw for the main component of the design so it is bit responsive for every dimension. I use px for font-size and small margins and paddings. rem is scalable means browsers will adapt the rem size according to the browser of the system while px are not-scalable. Other user accessing your website cannot force change its size.(If he has some theme or preferred browser font size).
Marked as helpful - @gchristofferson
Awesome! Thank you again for taking the time to review my solution and offer these helpful suggestions. This will make decision making for future projects much easier.
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