Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

QR code page with html, css and bootstrap

@saumitr

Desktop design screenshot for the QR code component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


This is my first submission on frontend mentor. I have tweaked mostly all the css property. Let me know if I have followed best practices properly. Any other feedback is greatly appreciated.

Community feedback

Ken 935

@kenreibman

Posted

Great job on your first submission!

I noticed that in your index.html you had

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

you can just have in your style.css

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

I also noticed that you have a .body in your style.css as well which is looking for an element with the class="body" I think you were meaning to select the body element as a whole and center items within in. In that case, you should have also just done

body {
    min-height: 100vh; <--- *NOTE I also changed this to min-height as it's better practice
    width: auto;
    display: flex;
    align-items: center;
  }

Marked as helpful

1

@saumitr

Posted

@kenreibman Thank you so much for your feedback.

The reason I was using html body in index.html was because I was not able to change background color of body in style.css. From online answers, I found that because I was loading bootstrap, it was setting to default color which was white, so I had to declare seperately.

But now that you explained that when declared as .body, it looks for class="body", and I should have instead declared body element as a whole in style.css, it makes a lot of sense and I tried it, it's working. I'm going to push the code changes shortly.

Thanks again for your valuable feedback.

0

Please log in to post a comment

Log in with GitHub
Discord logo

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