Qr Code Component using HTML & CSS

Community feedback

• 

  Ana Milanezi•190

  @anamilanezi

  Posted about 2 years ago

  Hi Jesse, congratulations on completing this challenge!

  A simple improve can be achieved by simply defining a text-align: center for your <h1>.

  Other thing I've noticed is that you used a <div> to the wrapper container instead of the <main> which is a semantic HTML tag, and also left the alt attribute empty on your image. This are all related with the page accessibility, and are some details that I've actually started to pay attention thanks to the Frontend Mentor community and their feedbacks.

  Hope this can help you somehow! Congratulations again and keep going! 💪

  00

  Marked as helpful
• 

  Ecem Gokdogan•9,380

  @ecemgo

  Posted about 2 years ago

  Some recommendations regarding your code that could be of interest to you.

  • You'd better remove margin from the body

  body {
    /* margin: 1.25rem; */
  }
  

  • When you use flexbox in the body, you don't need to use margin in the .container to center the card
  • If you use max-width, the card will be responsive
  • You can add text-align: center to center the texts

  .container {
    /* margin-bottom: 2rem; */
    max-width: 18rem;
    text-align: center;
  }
  

  • You can remove margin-bottom from the img

  .container img {
    /* margin-bottom: 2rem; */
  }
  

  • You can update margin in the h1 and add font-size to the texts

  .container h1 {
    /* margin-bottom: 2rem; */
    font-size: 1.3rem;
    margin: 1rem 0;
  }
  

  .container p {
    /* text-align: center; */
    font-size: 1rem;
  }
  

  • Finally, if you follow the steps above, the solution will be responsive. Additionally, you can remove media queries.

  /* @media (min-width: 500px) {
    .container {
      width: 400px;
    }
  } */
  

  Hope I am helpful. :)

  00