Submitted over 2 years ago

QR Code Component

Chris Nowicki• 140

@chris-nowicki

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

QR code component

HTML
CSS

1newbie

View challenge

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,420

@denielden

Posted 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!

Prabhash Ranjan• 2,540

@besttlookk

Posted 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

Please log in to post a comment

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