Skip to content
Submitted about 2 years ago

QR Code Layout using HTML and CSS

Pang Zi Ying•10
@Pangday
A solution to the QR code component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

Hi, I am unsure how to make the size of the body to look exactly like the design given for web & mobile (the 'light grey' area). It specified : mobile (375px), desktop (1440px), is that means I have to write 2 seperate codes to present them seperately? I abit confused on this part for the width and height of the background.

Also, I found that the responsive function <meta name="viewport" content="width=device-width, initial-scale=1.0"> seems like not working when I inspect it through chrome > - <.

My last question, for the margin for class="layout", I thought if I put margin: center, the whole white layout together with the QR code will move to the middle (with space on top bottom left right), but it didn't work in this way. Ended up, I've to use margin-top: 100px, only this able to put a space on top. Anyone knows what's wrong to my code?

Anyone able to help me to look into my code, thanks alot !!

Code

Please log in to post a comment

Log in with GitHub

Community feedback

  • Lucas Carlesso•140
    @lucarle

    You don't need to set the body/background width, by default any block element will fill the horizontal available space. For the height, you can use: "min-block-height: 100vh"

    Further reading/reference:

    Marked as helpful
  • Certification-Surya•70
    @Certification-Surya

    mobile (375px), desktop (1440px) = use of media query; there is no such thing as margin: center; You might have confused it with margin : auto; But margin: auto; will only work for centering horizontal space on block level element.

    My advice: Look at

    1. Box Modal and
    2. media Query

    "I thought if I put margin: center, the whole white layout together with the QR code will move to the middle " If you mean centering the div then look at:

    1. Flex-centering
    2. Grid-centering
    3. position-Absolute.
    Marked as helpful
  • Gemini S. Powell•10
    @GemAfaWell

    Just a heads up - using em, rem, and percentages instead of px for your CSS will essentially force responsiveness, as em/rem is based on the size of the parent and root elements, respectively, and percentages allow for an element to take a certain percentage of space up, regardless of overall size.

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