QR code component

Community feedback

• 

  P

  Øystein Håberg•10,710

  @Islandstone89Posted 12 months ago

  Hi, good job on doing this challenge. You can use the readme to describe your working process, reflect on what you found easy/difficult, etc. It's not something you have to write, though.

  On to the code...

  HTML:

  • The alt text also needs to say where it leads (frontendmentor.io).

  • The text in .attribution needs to be wrapped in a <p>.

  • I would also add the attribution class to the <footer>, and delete the <div>, as you don't really need it.

  CSS:

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

  • background-color should be set on the body instead of html.

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

  • Remove all fixed widths. You never want to set fixed widths or heights, unless sometimes for icons.

  • Add a max-width of about 20rem to prevent the card from getting too big at larger screens.

  To center the card horizontally and vertically, add the following on the body:

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

  • It's included in the mentioned CSS Reset, but the image needs a display: block and a max-width: 100%. This will prevent it from overflowing its container.

  • You only need to write text-align: center once, on the body. The children will inherit the value, so it works just the same, but with one less line of code.

  Good luck :)

  Marked as helpful

  0

  ---

  

  Sebastian•290

  @SebBudynskiPosted 12 months ago

  Hi, thank you for your comment. It's very helpfull for me. For example i didn't know about problem with font-size px and now reading about it.

  Have nice Day :) @Islandstone89

  1