QR component design solution

Hi @priya209,

Congratulations on successfully completing the challenge!

Your solution looks nice, though I have a suggestion that I hope will be helpful!

Suggestion: Using max-width Instead of Media Queries for Width

Instead of using media queries to set the width like this:

@media (min-width: 500px) {
    .container {
        width: 400px;
    }
}

You can directly use the max-width property on the .container. This will ensure that the component's maximum width is 400px on any screen size and reduce the width for screens smaller than 400px.

Here's how you can do it:

.container {
    max-width: 400px;
    width: 100%; /* Ensures it takes full width of the parent for smaller screens */
}

By using max-width, the container will adapt more gracefully to different screen sizes, eliminating the need for multiple media queries for width adjustments.

I hope you find this helpful, and I would greatly appreciate it if you could mark my comment as helpful if it was.

Feel free to reach out if you have more questions or need further assistance.

Happy coding!