Design comparison
SolutionDesign
Solution retrospective
Trying to Improve!
Community feedback
- @PhoenixDev22Posted about 2 years ago
Hi tony1610,
Congratulation on completing this frontend mentor challenge. Your solution looks great. I have some suggestions regarding your solution:
- You should use
<main>
landmark to wrap the card. HTML5 landmark elements are used to improve navigation experience on your site for users of assistive technology.
- In my opinion, the image is an important content. The alternate text should indicate where the Qr code navigate the user: like
QR code to frontend mentor
not describes the image. The alternate text should not be hyphenated, it should be human readable.
- Add
min-height: 100vh
instead ofheight: 100vh
to the body that let the body grows taller if the content outgrows the visible page instead.
- An element with width:100vw can extend below the vertical scrollbar of your browsers, inducing the apparition of horizontal scrollbars along with an unwanted side scroll. Use width:100% to the body instead will extend across the viewport but will always stop at the scrollbar.
There are a lot the arguments against the 62.5% font size trick ,it state that you should never change the root font size because it harms accessibility.
Overall, Excellent work! Hopefully this feedback helps.
Marked as helpful0 - You should use
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