QR code component with CSS

Community feedback

• 

  Melvin Aguilar 🧑🏻‍💻•61,140

  @MelvinAguilarPosted about 2 years ago

  Hi @SeanGrimes44 👋, good job completing this challenge, and welcome to the Frontend Mentor Community! 🎉

  Here are some suggestions you might consider:

  The container isn't centered correctly. You can use flexbox to center elements:

  body {
    margin: 0;
    width: 100%;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  

  Also, remove the padding: 8em from the card selector.

  Links with more information:

  • The Complete Guide to Centering in CSS.
  • A Complete Guide to Flexbox (CSS-Tricks).
  • How TO - Center Elements Vertically (W3Schools).
  • CSS Layout - Horizontal & Vertical Align (W3Schools).

  .

  • Try to use semantic tags in your code. Click here for more information.
  • Use max-width: 18.5em to .card-background selector instead of width, this will make the card container a bit responsive on mobile and set the element's maximum width to 18.5em.
  • Use margin: 0.938rem or margin: 15px in the .card-background selector so that it has some space when viewed on mobile devices.
  • Update the image selector to make responsive images.

  img {
      width: 100%;
      object-fit: contain;
      border-radius: 5%;
  }
  

  • The <br> tag is not a semantic tag, so you should not use it. Also, if a screen-reader reads the text, it will break the flow of reading at the line break tag, so it should be used to add vertical spacing. There are only a few cases where it is necessary (for example, in a poem or an address), and it is possible to avoid them by applying padding and margin styles via CSS. More information here.

  For example, you could remove the <br> tag and add margin-inline: 1rem; to the <h1> element , margin-inline: 1.5rem; to the <p> element and you would have the same result.

  I hope those tips will help you.

  Good job, and happy coding!

  Marked as helpful

  2