Skip to content
Submitted almost 2 years ago

Responsive QR Code Box using Pure CSS and Flexbox

Ecem Gokdogan•9,380
@ecemgo
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...QR code component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Community feedback

  • Melvin Aguilar 🧑🏻‍💻•61,140
    @MelvinAguilarPosted almost 2 years ago

    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
    2
    Ecem Gokdogan•9,380
    @ecemgoPosted almost 2 years ago

    @MelvinAguilar I updated my solution based on your suggestion. Thank you so much for the feedback! :)

    0
  • César Machado•30
    @cmachdevPosted over 1 year ago

    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

    0
    Ecem Gokdogan•9,380
    @ecemgoPosted over 1 year ago

    @cmachadodev your solution looks awesome. Also, I've just checked your solution from GitHub and you made a responsive one. I don't understand what is the problem.

    0
    César Machado•30
    @cmachdevPosted over 1 year ago

    @ecemgo already fixed, thank you for taking a time to answer me, before in the browser looked fine but in the comparison between the design and the solution the text was coming out of the container...

    1

Please log in to post a comment

Log in with GitHub

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