@elaineleung
Posted
Hi Dan, great work completing your first challenge, and great question as well 🙂
I used to use a mix of px and em, where px would be for font size and widths/heights, and em would be for padding and margins. Now I just use rem 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 use px 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 helpful
@dtp27
Posted
@elaineleung Thanks Elaine, I appreciate the feedback! I will use rems in my next project.
