QR Code Component

Some important HTML points in this, and CSS.

• Decorative svgs must be aria-hidden and all inline svgs must be focusable="false".
• The results list should be a list.
• The explicit width of the results circle plus large padding is causing a reflow failure. There is some horizontal scroll when there shouldn't be at some screen sizes/zoom levels. If you use max-width: 12rem; width:100%; on the circle that should fix it.
• Usually side padding will match on left and right e.g. in mobile view but in yours the top section looks narrower.

Hi, congrats on completing this challenge 🎉

By reviewing your code I notice that you don't use any css resets. I highly recommend using a modern css reset, it will set strong default styling that will make your life much easier to achieve pixel perfect results.

You can check these two options

Josh W Comeau's css reset or Andy Bell's css reset

As a challenge maybe you can try to get your solution closer to the original design?

A few points that could be tweaked :

• padding is to large
• attributions shouldn't be in the card
• the box shadow need to be softer and larger
• the width of the card is to large

Let me know if you update your code and want me to check it back.

In the meantime, happy coding ! ✌️