HTML and CSS

Community feedback

• 

  imad•3,330

  @imadvv

  Posted about 2 years ago

  Hello Mohammed! Congratulations on successfully completing the challenge! 👏👏👏

  I have reviewed your code and have a few suggestions to further enhance it. The main issue I found was with the width: 10% property in the .qr-container class. To resolve this, I recommend changing it to max-width: 16rem;. Additionally, removing the height attribute from the image and setting the width to 100% will improve the image display.

  Here's the updated code:

  body {
  min-height: 100vh;
  display: grid;
  place-content: center;
  }
  
  .qr-container {
  background-color: #fff;
  margin: auto;
  max-width: 16rem;
  padding: 20px;
  align-items: center;
  border-radius: 15px;
  }
  
  .qr-image img {
  width: 100%;
  margin: auto;
  padding-bottom: 20px;
  background-color: #fff;
  }
  

  Overall, your attempt is commendable. Keep up the good work, and welcome to the Frontend Mentor community!

  00

  Marked as helpful