Skip to content
Submitted over 2 years ago

QR Code Component

Chris Nowicki•140
@chris-nowicki
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

Solution retrospective

I had a difficult time with centering the QR Card horizontally and vertically. I am not sure if the max-width and max-height were necessary in my .card-container class:

.card-container {
    max-width: 1440px;
    min-width: 375px;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

Any and all feedback on my code is welcome!

Community feedback

  • Travolgi 🍕•31,400
    @denieldenPosted over 2 years ago

    Hi Chris, great work on this challenge! 😉

    Here are a few tips for improve your code:

    • remove max-width and min-width from .card-container because there aren't necessary
    • use min-height: 100vh instead of height
    • instead of using px use relative units of measurement like rem -> read here

    Overall you did well 😁 Hope this help!

    0
  • Prabhash Ranjan•2,540
    @besttlookkPosted over 2 years ago

    HI, About your prob. Transfer these lines to the body tag to center your container.

    body{
 height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

    This will work.

    Good Luck,

    happy coding

    0

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