Skip to content
Submitted 12 months ago

QR Code Solution using html and CSS only, without bootstrap.

ShadowMagus•20
@ShadowMagus
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 only had some trouble with centering the div element vertically as couldn't figure the total height of the body. the developer tool on chrome wasn't helpful in this somehow but at the end of the day I did manage to bring it to centre more or less. let me know how you would do it?

Community feedback

  • Enmanuel Otero Montano•2,155
    @Enmanuel-Otero-MontanoPosted 12 months ago

    Hello ShadowMagus!

    Congratulations on completing the challenge. An easy way to center an element is by applying the following CSS properties to the parent element (in this case the body) of the element you want to center: display: flex; justify-content: center; align-items: center;

    Marked as helpful
    3
  • Daniel 🛸•44,310
    @danielmrz-devPosted 12 months ago

    Hello @ShadowMagus!

    @Enmanuel-Otero-Montano gave you a very good advice on centering elements. Following the same line of thinking, don't forget to add height: 100vh in order to work properly.

    Also, you might wanna change your body background-color to #D6E1F0. It'll look even closer to the original design!

    I hope it helps!

    Great job!

    Marked as helpful
    2
    Enmanuel Otero Montano•2,155
    @Enmanuel-Otero-MontanoPosted 12 months ago

    Hello @danielmrz-dev!

    I agree 100%.

    1
    ShadowMagus•20
    @ShadowMagusPosted 12 months ago

    thank you both @danielmrz-dev , I'll definitely work on your and @Enmanuel-Otero-Montano 's suggestions.

    1

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