QR code page with Flexbox and media query

Hello there 👋. Congratulations on successfully completing the challenge! 🎉

• I have other recommendations regarding your code that I believe will be of great interest to you.

.

HTML 🏷️:

• This solution generates accessibility error reports, "All page content should be contained by landmarks" is due to non-semantic markup, which lack landmark for a webpage

• So fix it by replacing the <div id="mainframe"> element with the semantic element <main> element in your index.html file to improve accessibility and organization of your page.

• What is meant by landmark ?, They used to define major sections of your page instead of relying on generic elements like <div> or <span>

• They convey the structure of your page. For example, the <main> element should include all content directly related to the page's main idea, so there should only be one per page

.

I hope you find this helpful 😄 Above all, the solution you submitted is great !

Happy coding!

Replace <div id="mainframe"> with the main tag to fix the accessibility issue. click here for more on web-accessibility and semantic html

There is no need to style #mainframe a height value and to style #imagebox

To center #mainframe on the page using flexbox, add min-height: 100vh to the body.

Give #textbox a margin value for all the sides, text-align: center and a font-size of 15px which is 0.9375rem, this will be the font-size of both p and h1. Give p a margin-top or h1 a margin-bottom value for the space between the text.

For a responsive content, replace the width in #mainframe with max-width and give the img a max-width of 100% and a border-radius value, the rest are not needed.

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 👋. Good job on completing the challenge !

Here are some suggestions regarding your code that may be of interest to you.

HTML 🏷️:

To clear the Accessibility report:

• Wrap the page's whole main content in the <main> tag.

• Use HTML5 semantic elements such as <header>, <nav>, <main>, <aside>, and <footer> to define these sections you can also use ARIA landmarks such as <header role="banner"> and <footer role="contentinfo"> to provide additional information about the purpose of each section to assistive technologies.

I hope you find it helpful!😏 Above all, the solution you submitted is 👌. 🎉Happy coding!

add role main to your <div id="mainframe"> tag like this <div id="mainframe" role="main"> or you can just do it like this <main id="mainframe"> and the idea here is to make it more easier for screen readers to know where is the main content and you can also use something like <nav> , <footer> and <sidebar> tags for the same reason.

hope you find this helpful