Skip to content
Submitted almost 3 years ago

QR Code Using Flexbox

Max Kaiser•300
@maxkaiser100
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 struggled with how to get the main container to center vertically. I had to enter a height to force this which I'm sure isn't the right way.

Also, this is my very first solution I'm posting so any etiquette notes would be greatly appreciated. Still trying to get my brain around github, etc. to get this all working.

Thank you all in advance! Max

Community feedback

  • Naveen Gumaste•10,480
    @NaveenGumastePosted almost 3 years ago

    Hello Max Kaiser ! Congo 👏 on completing this challenge

    Let's look at some of your issues, shall we:

    • For this "I struggled with how to get the main container to center vertically" You have just do
    max-height: 100vh;
display: flex;
justify-content: center
align-item: center;

    • Check my article on accessibility issues

    • Always use h1 first and then h2, h3 and so on.

    • Always use the "alt attribute" and write what img is , and if the img is for decorative then leave it empty but always add it with img tag.

    happy Coding😀

    Marked as helpful
    0
    Max Kaiser•300
    @maxkaiser100Posted almost 3 years ago

    @Crazimonk Thank you. Got it working, but used "height" instead of "max-height".

    Made the other changes. That was exactly what I was looking for. Thanks so much - moving on to "NFT".

    Thanks again!

    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