Skip to content
Submitted over 2 years ago

QR-CODE: First Project HTML and CSS

YannickMukeng•20
@YannickMukeng
A solution to the QR code component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

I defined the body of my document as a "flexbox" and used padding to center my qr-code. Was there an easier way to get my qr-code in the center? So yes, how? My images also disappear when I upload it live, what do I have to put in my code to avoid this?

Code
Loading...

Please log in to post a comment

Log in

Community feedback

  • Blagoj•130
    @Bagataa

    Hey, you can easily center your card with Flex. In the body element, you should give height:100vh body { display: flex; justify-content: center; align-items: center; height:100vh } And you must delete the padding from the body you don't need it. Tip: U don't need flex-direction: row, By default, the flex items are placed in the row direction. HAPPY CODING

    Marked as helpful
  • Francesco Merighi•930
    @fmerighiwebdev

    To perfectly center an element within the page you can use flexbox or grid.

    Unfortunately the code on GitHub is not visible but I understand that you used flexbox to center it horizontally, you can also use it to center it vertically, thanks to the property 'align-items: center'

    Set a height of 100vh to the body, or the (parent) div that contains the card.

    I hope I was helpful, anyway, if you need, you can check my solution ;)

    Marked as helpful
  • Udbhav Dalmia•150
    @UdbhavDalmia

    You can add flex but you can also add margin right and left: auto; it would center it horizontally and make sure to do display: block; so it would be horizontally centered.

    Upload the QR code image and the favicon in the GitHub repository then they will show.

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