QR Code Component

You've done a wonderful job on this challenge!

I did notice, however, that the card is not responsive due to the hard-coded width that you've applied to the .container element, which causes overflow issues when the viewport width is reduced.

If you want the card's width to max out at 20rem, you can set the max-width to that value, and this will achieve the same result but with added responsiveness.

This is because max-width: 20rem sets the initial width of the card to 20rem but allows it to shrink if the viewport becomes too narrow or the content becomes wider than the viewport can contain due to changes in browser font size.

.container {
  width: 20rem; ❌
  max-width: 20rem;
}

I also noticed that shrinking the height of the viewport also causes some issues. The card gets partially cut off due to the body element's height being set to 100vh.

To fix this, you can simply change height to min-height:

body {
  height: 100vh; ❌
  min-height: 100vh;
}

Finally, this is a very small thing that isn't strictly necessary, but you may want to consider adding some padding to the body element because whitespace is important for visual balance, which improves user experience.

Other than that, this is a very good solution!

Hope this has been helpful! :)