
Design comparison
Solution retrospective
Hi everyone, thought I'd give this fun challenge a go. I've noticed that the screenshot mirrors the project in Firefox compared to Chrome. I've had to make adjustments to keep them acceptable on both, aside from the prefixes. I also can't get my .container
class to be as wide as it's supposed to be. It's identical to the design files in width, but it's a few pixels off when superimposed to the design. I can live with the results though :-)
My questions are mostly related to accessibility. What is the best way to deal with the base font size? I've been using the 62.5% route, since that was the advice given to me before. I've been reading up on it recently, and it was mixed opinions. So for this project, I reverted to setting it on html as px. Should I have placed a percentage value instead? Do I put it on body or html? Or should I stick to 62.5%? Looking for the standard and more accessible option.
Also, I'm not keen on major animations but I tried some here using a library to spiff up UX. At what point/how does it negatively affect accessibility?
Thanks and looking forward to your comments!
Community feedback
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