Skip to content
Submitted about 2 years ago

Responsive qr-code using HTML and CSS

Tricia H.•10
@triciahumann
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 really enjoyed building this project and found I only had difficulties with one part.

I would love feedback on my mobile media query. How do I get the container to fill the entire frame? I was able to get my solution to match the dimensions provided, but on a smaller device, there would be white space at the bottom. How do I fill the whole screen?

Community feedback

  • Dusan Brankov•860
    @dusan-bPosted about 2 years ago

    Hi Tricia,

    You should add the background to the body:

    body {
  background: hsl(212, 45%, 89%);
}

    For this card component you actually don't need any media queries. Instead, you could use the properties width and max-width to make it responsive:

    .container {
  width: 100%;
  max-width: 400px;
  padding-inline: 24px; /* Add padding on the sides */
}

    This way, the card takes up the entire width on screens up to 400 pixels wide. You can of course change these values to match the original design.

    Hope this helps. Keep going, and happy coding. :)

    Marked as helpful
    0
    Tricia H.•10
    @triciahumannPosted about 2 years ago

    @dusan-b Thank you Dusan! I truly appreciate the feedback : )

    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