Skip to content
Submitted 11 months ago

Responsive qr code component with Flex box

alameen-coder•10
@alameen-coder
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

  • Area of difficulty : I have difficulty centering the page and get the right number of margin and padding

  • Code am not sure of : Am unsure of the paragraph aspect and the margin of the qr-code container in the aspect of centering the page

  • Questions : no question for now

Community feedback

  • GEARdHAX•30
    @GEARdHAXPosted 11 months ago

    Hey @alameen-coder

    Great work buddy! Here's a solution for your difficulty,

    1. You can set postion fixed to attributes class and set bottom 0 with text-align center.

    2. For perfectly centered qr box, you can use body { display: flex; justify-content:center; align-items:center; min-height:100vh; }

    And rest of the alignments are perfect and color accurately used.

    Regards

    0
  • jc-mam•30
    @jc-mamPosted 11 months ago

    I used auto for margin n use flex n 100vh for vertical.

    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