Skip to content
Submitted over 2 years ago

Responsive QR Code Box using Pure CSS and Flexbox

Ecem Gokdogan•9,380
@ecemgo
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

  • 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.

    CSS 🎨:

    • Instead of using pixels in font-size, use relative units like em or rem. The font-size in absolute units like pixels does not scale with the user's browser settings. Resource 📘.
    • To center it vertically, you have two options: use min-height: 100vh instead of min-height: 100%, or if you want to use percentage heights, add height: 100% to the <html> tag. Then remove the absolute positioning; currently, your component is not very centered.

    Using percentage heights:

    body, html {
   height: 100%;
}
.flex-container {
    min-height: 100%;
}

    Using vh values:

    .flex-container {
    /* min-height: 100%; */
    min-height: 100vh;
}

    Remove these styles if you want to center it correctly:

    .qr-code-box {
    /* top: 160px; */
    /* position: absolute; */
}

.attribution {
    text-align: center;
    font-size: 15px;
    /* margin-top: 680px; */
    /* bottom: 0; */
    /* left: 0; */
    /* right: 0; */
}

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

    Happy coding!

    Marked as helpful
  • César Machado•30
    @cmachdev

    Hi, could you see my solution and tell me what I did wrong?

    Solution

    Look at the screenshot between my solution and the design

    Thank you

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