QR code solution

Community feedback

• 

  P

  Dave Quah•660

  @MilleusPosted almost 2 years ago

  👋 Hello! Congratulations on completing your first challenge.

  Typically you'd want to add a min-height: 100vh to the body so that the minimum height stretches to match the viewport. After that we could use Flexbox or Grid to help with centering. E.g.

  body {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  

  or with grid

  body {
    display: grid;
    place-items: center;
  }
  

  I'd suggest reading up more about Flexbox and Grid. MDN website is a good source for learning. There are also Flex/Grid game websites to help with learning.

  • MDN Flexbox
  • MDN Grids
  • Flexbox Froggy
  • Grid Garden

  Other than the issues highlighted in the accessibility report, one other thing that could be improved is to change the <div class="attribution" to a <p> tag instead as it would be more semantically correct.

  • MDN p element
  • MDN div element

  Hope this helps and happy coding~

  Marked as helpful

  1