QR code component using HTML and CSS

Hi, Taskin Sultana! 👋

Nice work on this challenge! 🙌

For the HTML, I recommend removing the div. You can make the img element as a block element. This is a common thing that developers will do to make it easier to work with the image elements.

img {
  display: block;
  max-width: 100%;
}

For the styling, there's no need for media queries to make the site fully responsive (my solution is one of the real evidence). You can achieve this by:

• Setting a max-width to the main element to prevent the card from filling the entire page while still allowing it to shrink if needed. Then, remove all the width.
• There is no need to set any min-height on the main element. Let the elements inside the card control the height of the card.

@media (max-width: 900px)
.main {
    /* width: 50%; */
    /* min-height: 30vh; */
    /* display: flex; */
    /* flex-direction: column; */
    /* padding: 12px; */
    /* background-color: hsl(0, 0%, 100%); */
    /* border-radius: 10px; */
    /* text-align: center; */
Note: there is no need to repeat the styling for the card (e.g. background color, etc).
}

.main {
    /* width: 20%; */
    /* min-height: 30vh; */
    /* display: flex; */
    /* flex-direction: column; */
    padding: 12px;
    background-color: hsl(0, 0%, 100%);
    border-radius: 10px;
    text-align: center;
    max-width: 17rem;
}

• Lastly, remove all the media queries.

That's it! I hope you find this useful!

Hey Taskin,

Congrats on now having any accessibility or html issues!

Your solution is comprehensive, one thing you can change is the font weight on the h1 text, this can be done by changing the font-weight attribute in css, and also make sure you added it on google fonts before your input.

Good luck with other challenges!