A qr-code page designed using plain css

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

• For centering the card vertically too, you have to set up a height.

body {
  min-height: 100dvh;
}

• Never use a fix width. If you want to make the card responsive then use the min function, it will always use the lower width. When the width of the screen is lower than 350px the card get a width of 90dvw. (Learn about the min function)

#container {
    width: min(350px, 90dvw);
}

• Making the image responsive too. Firstly i give it a width of 90%. Then i want every side of the image the same size and therefore i use aspect-ratio. Lastly i center the image with margin. (Don´t forget the display: block; for it)

img#qr-code {
    /* position: relative; */
    /* margin: 17px; */
    aspect-ratio: 1 / 1;
    width: 90%;
    margin: 1rem auto;
    display: block;
}

My solution of the challenge.

I hope i could help you to improve your skills. 😉 Happy coding 😊

hi there! 👋

You can center your content using Flexbox if you apply these to the body tag:

body {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

Hope this was helpful🙏

Good luck and happy coding! 💪