QR code component with CSS

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!