qr-code-component-main

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..

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 to min-height in your body element, to improve your component's responsiveness.

• Change width to max-width in your component’s container to make it responsive. You will also want to remove the height as it is unnecessary.

• Change width to max-width: 100% in your image to make it responsive. You will also want to remove the height as it is unnecessary.

If you have any questions or need further clarification, feel free to reach out to me.

Happy Coding!🎄🎁