Skip to content
Submitted over 2 years ago

QR Code 3rd Solution

Clea Carty•20
@CNash23
A solution to the QR code component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

My code is as follows for the body:

body{ background-color: hsl(212, 45%, 89%) ; min-height: 100vh; display: grid; place-content: center;

It seems to be properly centered with Live Server but it displays differently with the Github link.

Code

Please log in to post a comment

Log in

Community feedback

  • Kukuh Wijanarko•190
    @kkhwjnrk

    To properly center the content, you can move the properties from the body element to the main element and adjust the min-height: 90vh;. Additionally, you may need to reduce the top margin on the .attribution

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

main {
  min-height: 90vh;
  display: grid;
  place-items: center;
}
    Marked as helpful
  • Clea Carty•20
    @CNash23

    At least the reporter found no issues. The first time I did this challenge I think it was centered better when I used margins. So I wonder what the issue could be. This is the author of this challenge project CNash23.

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