Design comparison
Solution retrospective
So I have a few things I struggled with or am confused about:
- I used rems for most of the sizing. I think that should be fine? I'm not entirely sure on when to use what unit.
- I'm not sure about what the best accessibility practices are when it comes to QR codes. I put alt text on it to mention where it leads to, but I'm not sure how someone using a screen reader would actually use it. I've gone more into detail about this on the repo page.
Community feedback
- @Steeve26Posted over 1 year ago
So 'rem's(16px) adjust your content based on the root font-size while 'em's(16px) adjust based on the element font-size. So if a div has elements with '3em' values inside, and you make the div's font size '10em' the child elements will have values of 10em X 3em = 30em (480px)
1@taco-nekoPosted over 1 year ago@Steeve26 Sorry, I should have clarified further: I do know the difference between them, I just don't know the best use-cases for them. All I really know is that I prefer using ems for buttons so I can scale them without issues, but as for the rest of the page, I don't know what I should use.
1@Steeve26Posted over 1 year ago@taco-neko Oh, I see. Well yeah, it's just for easy scaling as far as I can tell. Just figure out what content you want up/downscale and with a simple font-size adjustment in the media query, you can easily make sites responsive. I suggest you experiment with single page websites to get a good feel of how to plan your content for easy responsiveness with rems and ems.
1
Please log in to post a comment
Log in with GitHub
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