QR Code Component Using HTML and CSS

Hi Jaecoder20,

I think the best practice regarding you are looking for concerning media queries is called "mobile first".The core idea is that you start styling your page/app for mobile devices. Once you're done with that, you start increasing the viewport width, and once something breaks or start looking bad, you add a media query to fix your styles. :) There's an article on css-tricks - it's a great site and I can't recommend it enough.

Also, look up something called BEM - it's a way to organize your css code.

Overall, great work, keep hacking! :)

Hi! Just some quick feedback:

1. Noticed a QR overflow on wider screens. No need for media queries here—just set a max width on the QR code div, and a width to ensure it adjusts on narrower screens. Consider clamp() for responsive sizing. Media queries are better for altering layout/content per screen size. A mobile first approach is a good practice to simplify initial designs, though not crucial for this challenge. :)

2. The QR code is rounded at the top, but padding pushes the image down, leaving an empty space. Understand the difference between padding and margins, and apply "box-sizing: border-box" to all elements using the universal selector "*". This along with clearing default margins and padding should be among your first steps – it's a game changer! :)