Beginner QR Card

Community feedback

• 

  P

  Øystein Håberg•10,710

  @Islandstone89Posted 11 months ago

  HTML:

  • You need a <main>, this is important for accessibility. The main> can also be the card. I would remove all divs, as they are not needed. .attribution should be a <footer>, and its text must be wrapped in a <p>.

  CSS:

  • It's good practice to include a CSS Reset at the top.

  • Font-size must never be in px. Use rem instead.

  • Since all of the text is centered, you only need to set text-align: center on the body.

  • Remove the fixed width. You rarely want to set fixed dimensions, as this easily creates issues with responsiveness.

  • Add max-width: 20rem on the card, so it doesn't get too wide on larger screens.

  • Instead of using margin on the card, you can use Flexbox on the body:

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  

  • On the image, remove height, it is not needed. Replace width with max-width: 100%, and add display: block.

  Marked as helpful

  1

  ---

  

  P

  Mark Suson•100

  @marksusonPosted 11 months ago

  @Islandstone89 Awesome! Thanks for the helpful changes. I’ll review and update tomorrow!

  1

  

  P

  Mark Suson•100

  @marksusonPosted 11 months ago

  @Islandstone89 Changes made. Thanks for the advise!

  1