Responsive QR code component

Replace <section id="all"> with the main tag,<div class="bold"> <p> with <h1> and <div class="attribution"> with the footer tag to fix the accessibility issues. click here for more on web-accessibility and semantic html

To center .container on the page using flexbox, replace the height in #all with min-height: 100vh.

There is no need to give #container a height value. For a responsive content , replace the width in #container with max-width and increase the value for it to be equivalent to the with of the design max-width: 320px which is 20rem. Increase the padding value to 1rem.

Give the img a max-width of 100% for a responsive image.

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 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 👋. Congratulation for completing the challenge👍!

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 landmarks. For example, you could use a <footer> tag to wrap the <div class=”attribution”> section.
• The heading order is important in the html structure so try to always start your headings with an <h1> tag and then you can decrease by one if you need to use more heading in your html code.

I hope you find it useful! 😄 Above all, you did a good job!

Happy <coding /> 😎!