Skip to content
Submitted over 2 years ago

QR code page with Flexbox and media query

5AMO7•10
@5AMO7
A solution to the QR code component challenge
Preview (opens in new tab)Code (opens in new tab)
Code

Please log in to post a comment

Log in

Community feedback

  • Abdul Khaliq 🚀•72,380
    @0xabdulkhaliq

    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!

  • Hassia Issah•50,410
    @Hassiai

    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

  • Finney•3,010
    @Finney06

    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!

  • Loai Esam•670
    @LoaiEsam37

    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

Join 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