Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Mobile first landing page using CSS Grid and Flexbox

@gchristofferson

Desktop design screenshot for the Meet landing page coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

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?

Community feedback

@imparassharma

Posted

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

0

@gchristofferson

Posted

@imparassharma Thank you Paras! So if I don't want users accessing the website to be able to force change the font-size, I should use px, correct? :-) Otherwise, if I do want to allow them to change font-size, it should be set to rem?

0

@imparassharma

Posted

@gchristofferson It is one of the property....There is so much to learn to get a proper reason where to apply px or rem. But my advice is for small things use px like font-size etc and for positioning use rem/ % etc this will make your webpage responsive and you have to write less media queries for other dimensions.

1

@gchristofferson

Posted

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.

1

Please log in to post a comment

Log in with GitHub
Discord logo

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