Design comparison
Solution retrospective
I used a mix of units, between "em" and "px". What are some best practices when it comes to using "px" as opposed to more relative units such as "em" and "rem", especially when dealing with sizing in margins/padding?
Thanks!
Community feedback
- @elaineleungPosted over 2 years ago
Hi Dan, great work completing your first challenge, and great question as well 🙂
I used to use a mix of
px
andem
, wherepx
would be for font size and widths/heights, andem
would be for padding and margins. Now I just userem
for nearly everything that I can, including font size, and it's just so much easier when I know 1rem is 16px. I also use a 1rem on the body's font size usually, and if the copy's font size is something else, I'd just make sure the main container has that font size. I still usepx
sometimes for certain things, like when I'm using a media query and need an image or container to be at a size that I can easily remember.Your solution looks pretty good, and a small suggestion I have is to use responsive properties for width and height, especially the body's height. If you make the browser window smaller than the component, the component will overflow out of the viewport. You can try a
min-height: 100vh
instead with some margin around the component.Once again, well done!
Marked as helpful1@dtp27Posted over 2 years ago@elaineleung Thanks Elaine, I appreciate the feedback! I will use rems in my next project.
0
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