Skip to content
Submitted over 1 year ago

QR Code Layout using HTML and CSS

Pang Zi Ying•10
@Pangday
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

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 !!

Community feedback

  • Lucas Carlesso•140
    @lucarlePosted over 1 year ago

    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
    0
  • Certification-Surya•70
    @Certification-SuryaPosted over 1 year ago

    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
    0
  • Gemini S. Powell•10
    @GemAfaWellPosted over 1 year ago

    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.

    0
    Pang Zi Ying•10
    @PangdayPosted over 1 year ago

    @GemAfaWell Thanks for your comment ! I will try to use rem to see the difference next time !

    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