QR code components

Hey, good soluten but i have some points for improvment.

• Firstly i want to center the card in the middle of the screen. Therefore i use grid . Then i have to to say that every element in the grid container should be centered verticaly and horicontaly. Normaly every adult container has the height of all the children. We want the full theefore we use height (you can use min-height) too. 100dvh is the full height of the screen without the searchbar.

body{
    display: grid;
    place-items: center;
    height: 100dvh;
}

• The card: The gridcentered the card in the middle of the screen, therefore we didn`t need the margin anymore. Never declare the height, because when the headline or the paragraf is longer the content overlaps.* Instead of using pxuse the min function. It means when the screen is widther than 350px the width is equale to 350px. When it´s no widther than 350px it´s 96dvw of the screen width. (The min function makes it easier to make websites responsive. 😉)

.back{
    /* width: 300px; */
    /* height: 450px; */
    /* margin: auto; */
    padding: 10px;
    width: min(90dvw, 350px);
}

• The img: As i said before never use px. The best choose is to use % as i used in the CSS. Then use aspect-ratio to make the width and the height the same. And again it´s responsive 😉.

img {
    border-radius: 20px;
    /* width: 280px; */
    /* height: 280px; */
    aspect-ratio: 1 / 1;
    width: 90%;
}

• You didn´t need the div with the img in it. This is how I would set it up

       <section>
            <img src="PATH" alt="TEXT" >
            <h1>TEXT</h1>
            <p>TEXT</p>
        </section>

Maybe it helps you to see my solution of the challenge.😁

I hope i could help you. Happy coding 😊

you can add in you component class the code below for you to center your main component:

.my_class{ position:absolute; left:50%; top:50%; transform: translate(-50%, -50%) }