QR Code Component

Community feedback

• 

  P

  Øystein Håberg•10,390

  @Islandstone89Posted 10 months ago

  HTML:

  • Every webpage needs a <main> that wraps all of the content, except for <header> and footer>. This is vital for accessibility, as it helps screen readers identify the "main" section of a page. I would change .box into a <main>, and delete the .wrapper, as you don't need any wrapping divs.

  • The image must have alt text. This is essential for screen readers to understand the image. The alt text should be descriptive, and in this example, it also needs to say where it leads (frontendmentor.io).

  CSS:

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

  • To center the card horizontally and vertically, use Flexbox on the body:

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

  • Remove the fixed width on the card. Except for icons, you rarely want to set fixed dimensions(especially heights), as this easily creates issues with responsiveness.

  • Add a max-width of around 20rem on the card, to prevent it from getting too wide on larger screens.

  • Since all text should be centered, you only need to set text-align: center on the body, and remove it elsewhere. The children will inherit the value.

  • Add display: block and max-width: 100%on the image - the max-width prevents it from overflowing its container.

  Marked as helpful

  0