Skip to content
Submitted over 1 year ago

QR code display using CSS and HTML

Mariah Wear•20
@mariahw4
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'm excited with how this project went - I feel like I was able to create simple and functional code/css.

I am unsure/questioning if there's a better way to center my box containing the image/content vertically within the page. Until I added some padding this container seemed to just fill the vertical space of the whole browser window.

Thank you!

Community feedback

  • visualdennis•8,375
    @visualdennissPosted over 1 year ago

    Hey Mariah,

    your solution looks great. I have a suggestion regarding centering. To center your card, instead of paddings: 5%; a better practice would be min-height 100vh, so it stays more consistent with changing browser sizes. E.g.

    main { display: grid; place-items: center or your flex-code and ; min-height: 100vh; }

    also you can add some min-width to your code to prevent it getting too narrow with resizing.

    Hope you find this feedback helpful!

    Marked as helpful
    1
    Mariah Wear•20
    @mariahw4Posted over 1 year ago

    @visualdenniss THANK YOU!! I updated the padding to vh and definitely see the benefit! Also added some min/max width elements so my box doesn't shrink down to such a hard to read size on a smaller window/mobile device!

    1
  • Islam abozeed•240
    @islamabozeedPosted over 1 year ago

    woooooooow, it's awesome, nicely done

    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