Skip to content
Submitted over 2 years ago

QR code component HTML & CSS

Oyasi Kelly Ogheneoghagha•200
@Oyasikelly
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 was having issues with the responsiveness of my previous challenge, but I tried to work on it. So I picked this challenge to work on. I need you to help me out with your observations. Let me know if I still need to work more on this, the responsiveness.

Community feedback

  • Elaine•11,400
    @elaineleungPosted over 2 years ago

    Hi Oyasi Kelly, great job on this second challenge! I see that you managed to host your solution on Netlify this time, and everything looks fine, so well done 🙂

    About the responsiveness, you can achieve this by using responsive properties such as max-width. You firstly need to use the entire body canvas, as right now it's set to a width of 250px, which is much too small for the body. We normally do not set any fixed widths on the body aside from 100%. Once you have the correct dimensions on the body, you can easily center your entire component using display: grid and not need to use padding and margins.

    I'd rewrite the body like this

    // resets here

* {
   box-sizing: border-box;
}
html, body, main, section, h1, h2, p, span {
   margin: 0;
   padding: 0;
}

// everything else

body {
   width: 100%;
   min-height: 100vh;
   display: grid;
   place-content: center;
   background-color: rgb(220, 232, 238); 
   font-family: 'Poppins', sans-serif;
   text-align: center;
}
.wrapper {
   max-width: 400px;  // notice that this is not width
   padding: 1rem;
   margin: 1rem;
}
.image-wrapper {
   border-radius: 30px;
   background-color: rgb(50, 145, 240);
   padding: 3rem; // this is just a suggest value
}
img {
   display: block;
   max-width: 100%;
}

    That should give you the general shape of the component. I notice also that the QR code you used is different than the one in the design, and you are using rbg() instead of hsl(), which is normally what Frontend Mentor uses. Were you able to use the files provided in the folder of the challenge? If so, you will find the style guide and also the image folder. You also would need the correct font faces; I see you have Poppins in the <head> tag, but there are no font weights (e.g., 400, 700), so be sure to add them in from Google Fonts.

    I encourage you to practice this challenge again, especially in how to write out the body selector. Keep going, you're doing great 😊

    1
  • Prince Roy•1,210
    @iprinceroyyPosted over 2 years ago

    Hey @Oyasikelly. You need to focus on some key points here:-

    1. There should be one heading tag on a web page, if there is no heading element requirement, then set its font size to 0. HTML- <h1></h1> CSS- h1{ font-size: 0; }
    2. The content should be wrapped inside the main landmark to avoid accessibility issues. Like this <body><main>your content goes here......</main></body>.

    Hope it adds to your learning. Happy coding :)

    0
    Oyasi Kelly Ogheneoghagha•200
    @OyasikellyPosted over 2 years ago

    @iprinceroyy: Thank you very much, it was helpful.

    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