QR-code-component //Using Html and CSS

Replace<div class="container">with the main tag and <div class="attribution"> with the footer tag to fix the accessibility issues. click here for more on web-accessibility and semantic html

There is no need to give the body a margin value. To center .container on the page using flexbox, replace the height in the body with min-height: 100vh.

For a responsive content which wont require a media query for this challenge, give .container a fixed max-width value. max-width: 320px

Give h1 and p the same font-size of 15px which is 0.9375rem and the same margin-left, margin-right and margin-top values. Give p a margin bottom value.

Use relative units like rem or em as unit for the padding, margin, width values and preferably rem for the font-size values, instead of using px which is an absolute unit. For more on CSS units Click here

Hope am helpful.

Well done for completing this challenge. HAPPY CODING

Hello there 👋. You did a good job!

I have some suggestions about your code that might interest you.

HTML 📄:

• Wrap the page's whole main content in the <main> tag.
• If your code has different sections that have a specific purpose like a navigation, article, sections or footer, it’s a good practice to enclose those parts with HTML5 semantic tags. For example, you could use a <footer> tag to wrap the <div class=”attribution”> section.
• Make sure that the <img> elements in your HTML code has an alternate (descriptive) short text. The reason for this is that screen readers can’t translate images into text. So to fix this you can do the following <img src=”…” alt=”short text” >

I hope you find it useful! 😄 Above all, the solution you submitted is great!

Happy <coding /> 😎!

Hello there 👋. Good job on completing the challenge !

I have other suggestions about your code that might interest you.

• Since this component involves scanning the QR code, the image is not a decoration, so it must have an alt attribute. The alt attribute should explain its purpose. e.g. QR code to frontendmentor.io

• Use padding: 1.25rem; instead of margin: 1.25rem; in the body element to remove the scrollbar on desktop devices.

• • Use min-height: 100vh instead of height. Setting the height to `calc(100vh - 1px) may result in the component being cut off on smaller screens, such as a mobile phone in landscape orientation.

I hope you find it useful! 😄

Happy coding!

Hey 👋 You can add max-width instead of width for your container element ... then it will not go out of flow .... it will stay relatively to your screen size , i mean for better responsiveness.

.container{ max-width:300px; width:100%; }