Responsive QR code component

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

If you want that this solution is responsive, I recommend some techniques without using media query for this solution but it's up to you whether you use it or not

• If you want to make the card centered both horizontally and vertically, you'd better add flexbox and min-height: 100vh to the body
• For the color of the screen, you can use the recommended color in the body

body {
      /* background-color: #b1c5d4;  */
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
      background-color: hsl(212, 45%, 89%);
}

• If you use flexbox in the body, you don't need to use flexbox and margin in the #card to center the card, you can remove them to avoid repetition
• If you use max-width instead of width and height, the card will be responsive
• You'd better give padding to give a gap between the content and the border of the card

 #card {
      /* width: 280px; */
      max-width: 280px;
      /* height : 430px; */
      /* margin: 0 auto; */
      /* display: flex; */
      /* flex-direction: column; */
      /* justify-content: center; */
      /* margin: 200px auto 5px auto; */
      padding: 15px;
    } 

• In addition to that above, in order to make the card responsive and the image positioned completely on the card, you'd better add width: 100% and height: 100% for the img

.image-qr-code {
      border-radius: 20px 20px 20px 20px; 
      /* padding: 15px; */
      width: 100%;
      height: 100%;
}

• Finally, you don't need to use media queries for this solution because the card will be responsive if you follow the steps above

Hope I am helpful. :)

Hello 👋, Well done on completing the challenge – you did it! 🌟

I have some interest and feedback with your code

That i like:

1. I appreciate the similarity of your results with the design, a bit different in scale and color but still good
2. html is pretty good, not too nested 👍
3. CSS Naming is also good, represent what is it for, like <div class="card"> for card section

My Feedback:

• I suggest you use html semantic convention, for example add <main class="container">, it will make it clearer, and will improve seo if you want to submit your website to google, i recomended this article: here
• for card section i’m prefer to use class instead id, because card is component which may be used again and again.
• In galaxy fold (280px x 653px) is not to responsive, you can fix it by using dynamic width in image
  • remove margin in #card add padding 15px in #card
  • remove padding in .image-qr-code and add width: 100%; in .image-qr-code

anyways overall is good, nice solution, hope it useful 🙌