Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
3
Comments
2
Kegan
@KeganF

All comments

  • A.•390
    @MooseCowBear
    Submitted over 2 years ago

    QR code component using flexbox

    2
    Kegan•100
    @KeganF
    Posted over 2 years ago

    Nice job completing the challenge! 😊

    To (hopefully) answer your question: The body and the html elements have a default height of auto, meaning it will automatically adjust to fit its content. So as you create your qr-container, the body will change its size so that it is always the minimum height required to display its content. This is why you can't use justify-content: center without setting a height for the body; it is already vertically centered within the body (because there is no space above or below the container).

    When you set height: 100vh, you are overwriting the default of auto and telling the body to take up 100% of the viewport height. In some cases (especially with mobile devices) this can cause some issues with overflowing, so it is recommended to use min-height: 100vh instead, because if any content in the body is larger than the viewport itself, the body will still grow to fit its content properly.

    An extra piece of advice would be to check out some CSS resets. They help your webpage look the same across different browsers by resetting the default formatting of your webpage, and a lot of them will handle the min-height: 100vh for you. I like to use Andy Bell's CSS Reset, but there are many different ones you can try out.

    I hope this helped!

    Cheers! 😀

    Marked as helpful
  • Caio Schwab Moitinho•70
    @CaioSchwab
    Submitted over 2 years ago

    QR code component with HTML5 & CSS3

    #accessibility
    2
    Kegan•100
    @KeganF
    Posted over 2 years ago

    Nice job completing your first challenge!

    One thing I would suggest is to add some more semantic HTML by wrapping the contents of the card (img, h1, and p tags) in something like an article tag.

    This reference talks about semantic HTML elements and says that an article "should make sense on its own, and it should be possible to distribute it independently from the rest of the web site."

    Not only will an article element act as a container to group together all the elements of your card, it will also help make it reusable in other places!

    Cheers! 😀

    Marked as helpful
Frontend Mentor logo

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub