Design comparison
Community feedback
- @HassiaiPosted almost 2 years ago
Replace <h2> with <h1> and <div class="attribution"> with the footer tag to fix the accessibility issues. for more on semantic html visit https://web.dev/learn/html/semantic-html/
Use rem or em as unit for the padding, margin, width and preferably rem for the font-size for more on this watch this https://youtu.be/N5wpD9Ov_To
There is no need to give the main a height the padding is sufficient and more responsive.
Hope am helpful. Happy coding..
0 - @VCaramesPosted almost 2 years ago
Hey there! 👋 Here are some suggestions to help improve your code:
-
The
alt tag
description for the “QR image” needs to be improved upon. Its needs to tell screen reader users what it is and where it will take them to when they scan it. -
Change the
height
tomin-height
in yourbody
element, to improve your component's responsiveness.
- Change
width
tomax-width
in your component’s container to make it responsive. You will also want to remove theheight
as it is unnecessary.
- Change
width
tomax-width: 100%
in your image to make it responsive. You will also want to remove theheight
as it is unnecessary.
If you have any questions or need further clarification, feel free to reach out to me.
Happy Coding!🎄🎁
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