Responsive QR-Code-Component using HTML5 and CSS flexbox

I encourage you to use this technique to make the card responsive with ease:

.card {
width: 90%;
max-width: 600px;
}

On the smaller screens card will be 90% of the parent (here body), but as soon as the card will be 600px it will lock with this size.

Also to put the card in the center I advise you to use this code snippet:

.container {
display: grid;
place-items: center;
}

Hope you found this comment helpful 💗💗💗

Good job and keep going 😁😊😉

Hi @shikurassefa,

Nice project! I noticed a couple of areas for improvement:

Semantic HTML: Consider adding a <main> tag to improve SEO and accessibility. You also don’t need more than one container—using display: flex with a column direction can simplify your layout and make your code cleaner by reducing unnecessary nesting. Always aim to avoid excess <div> elements when possible.

Headings Usage: It’s important to use heading tags for their semantic purpose, not just for styling. For example, <h1> is reserved for the page title and should only be used once, while <h2> would be the correct heading tag for this project.

Keep up the great work!

Best, Teodor

Need to spent some time reading on 'display flex' and how to make sure your main block is appropriately aligned in the centre.

я рада что нашла такой оглайн ментор, было очень удобно и понятно