QR code component

Hi @Ammar0Yasser 👋, good job on completing this challenge! 🎉

Here are some suggestions you might consider:

• Setting element width with percentages or VW will cause your component to behave weirdly on mobile devices and high-resolution desktops.

You can set the width to 320px or 20rem. It will help you avoid occupying too many media queries

.card {
    . . .
    /* width: 20%; */
    max-width: 320px;
    margin: 0.938rem
}

.img-container {
     /*        This can be removed */
    /* border-radius: 8px; */
    /* width: 100%; */
    /* max-height: 13rem; */
    /* height: 16rem; */
    /* overflow: hidden; */
    /* display: flex; */
    /* justify-content: center; */
    /* align-items: center; */
}

.img-container img {
    width: 100%;
    object-fit: fill;
    border-radius: 8px;
}

@media (max-width: 375px){
 .card {
    /* width: 75%; */
 }
}

• Use margin: 0.938rem or margin: 15px in the .card selector so that it has some space when viewed on mobile devices.
• Use min-height: 100vh to container selector, with this property you set a height and you let the element grow even more if necessary. Also, remove the margin: 9vh 1em; to center correctly.
• Add an h1 tag to your solution. The <h1> element is the main heading on a web page. There should only be one <h1> tag per page, and always avoid skipping heading levels; Always start from <h1>, followed by <h2>, and so on up to <h6> (<h1>,<h2>,...,<h6>). The HTML Section Heading elements (Reference)

Solution:

<h1>Improve your front-end skills by building projects</h1>

I hope those tips will help you.

Good job, and happy coding!