QR code component

Community feedback

• 

  P

  Øystein Håberg•10,390

  @Islandstone89Posted 8 months ago

  HTML:

  • You don't need to write role="main", as that is implicit when using the <main> element.

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

  CSS:

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

  • Add around 1rem of padding on the body, so the card doesn't touch the edges on small screens.

  • Remove width and height on body. The body is a block element, which means it fills the available width by default. And while you do need to give body a height to be able to center the card vertically(by default, the body is only as tall as its content), there is a better way than using 100%.

  • You should not use position and transform to center the card, so remove those properties.

  • 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: 100svh;
  

  The reason we're using min-height instead of height is because this way, the content will not get cut off if it grows beneath the viewport.

  • Remove the width on the card.

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

  • font-size must never be in px. This is a big accessibility issue, as it prevents the font size from scaling with the user's default setting in the browser. Use rem instead.

  • On the image, add display: block and change width to max-width: 100% - the max-width prevents it from overflowing its container.

  Marked as helpful

  1

  ---

  

  holabayor•10

  @holabayorPosted 8 months ago

  @Islandstone89 Thank you for the corrections. I'll make the changes.

  1
• 

  P

  brian•1,590

  @bc464Posted 8 months ago

  Hi, Congratulations on your first project. Code looks structured and readable. A suggestion to consider for future projects, with regards to determining the size of the container, if you are using windows, under Windows Accessories use Paint [on the preview provided in the design] and set the gridlines option, that will enable you to determine the pixel width and height. Keep the momentum going and enjoy the learning process.

  Marked as helpful

  1
• 

  Deepak Kumar Meena•40

  @Genrex7Posted 8 months ago

  Nice work. Code is easily well-structured, readable and reusable. Can increase the width and height of the qr__container. Layout looks good on a range of screen sizes.

  Marked as helpful

  1