Solution for the QR code component challenge on Frontend Mentor

Community feedback

• 

  P

  Øystein Håberg•10,710

  @Islandstone89Posted 12 months ago

  Hi, good job. Here are a few suggestions to make it even better.

  HTML:

  • You need a <main>, this is important for accessibility. Change .container from a <div> to a <main>.

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

  • Footer text needs to 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 center-aligned, you only need to set text-align: center on the body - remove it elsewhere.

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

  • Do add a max-width in rem. This is to prevent it from getting too big on larger screens. Around 20rem should be fine.

  • Remove margin: 4rem auto on the card. Instead, use Flexbox to center the card horizontally and vertically. Since Flexbox needs to be set on the parent, put it on the body:

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

  Marked as helpful

  1
• 

  Enis Kerti•590

  @eniskrtPosted 12 months ago

  Good job. You can use display:flex; align-items:center; justify-content:center; min-height:100vh; in body element to get the card in the middle of the page.

  Good code.

  Enis...

  Marked as helpful

  1

  ---

  

  Gabe Phiri•40

  @Aky11TazPosted 12 months ago

  Thank you @eniskrt

  0

  

  Enis Kerti•590

  @eniskrtPosted 12 months ago

  You're welcome. :) @Aky11Taz

  0