Skip to content
Submitted over 2 years ago

Frontend-Mentor-QR-code-component solution using Flexbox

RoboXGamer•20
@RoboXGamer
A solution to the QR code component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

I am learning while building this as my first project. Pls give me tips how should I improve the responsiveness of the site?

Any Feedback Is Welcome!

Code

Please log in to post a comment

Log in

Community feedback

  • Melvin Aguilar 🧑🏻‍💻•61,020
    @MelvinAguilar

    Hello there 👋. Good job on 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.

    Alt text 📷:

    • The alt attribute should explain the purpose of the image. Uppon scanning the QR code, the user will be redirected to the frontendmentor.io website, so a better alt attribute would be QR code to frontendmentor.io

      If you want to learn more about the alt attribute, you can read this article. 📘.

    CSS 🎨:

    • The simplest way to set the height of the body element is with min-height: 100vh, setting the height to 100% on both the body and html elements can cause your component to be cut off on small screens, such as a mobile phone in landscape mode.
    • If you want to have a responsive component that resizes, you should use max-width: 320px on the component instead of fit-content, then use max-width: 100% on the image so that the edges don't get cut off on mobile devices.

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

    Happy coding!

    Marked as 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