Responsive Qr code card bulit with HTML & CSS

Hi 👋!

On inspecting your solution I found that you used media queries for the range of 375 to 768px, but the layout breaks on larger screens. I recommend removing this media rule and applying styling normally. Additionally, consider adding a media rule for widths below 766 or 600px and apply the appropriate styling for smaller screens.

Hello there 👋. Congratulations on successfully completing the challenge! 🎉

• I have other recommendations regarding your code that I believe will be of great interest to you.

QR iMAGE ALT TEXT 📸:

• The QR Code Component involves scanning the QR code, the image is not a decoration, so it must have an alt attribute which should explain the purpose of the image.

• The alt with image-qr-code is not even explaining for what the QR image need to be used.

• So update the alt with meaningful text which explains like QR code to frontendmentor.io

• Example: <img src="/images/image-qr-code.png" alt="QR code to frontendmentor.io">

.

I hope you find this helpful 😄 Above all, the solution you submitted is great !

Happy coding!

Congratulations on completing the challenge! That's a great achievement, and I'm sure you put a lot of effort into it. I really liked the way you approached the challenge and the code you wrote. You demonstrated a good understanding of the concepts and applied them effectively to solve the problem.I have a few suggestions to improve your code further. When it comes to centering a div or any element on a webpage, using margins may not always be the best approach. so use flexbox or grid layout for centering the div

Here's an example code snippet:

body {
display: grid;
place-items: center;
min-height: 100vh;
}
now remove below lines of code
.card {
position: relative;
margin: 5rem auto;
/* width: 400px; */
/* height: 300px; */
}