QR Code Component design using flexbox and using viewport height

Hello Urinzi! 👋

Congratulations on completing this challenge! 🎉

In this case, the best way to center the card element is to make the body element as either grid or flexbox container. So, I would recommend removing the flex properties from the card element. After that, add place-items: center and use min-height instead of height property.

place-items: center is equal to justify-content: center and align-items: center. I recommend using min-height because it will make sure that the body element would allow to grow if ever needed.

Some best practices.

• figure element doesn't need to wrap the img element. The only reason to use figure is if you need to include a figcaption. Otherwise img tag is fine.
• Use single class selectors for styling whenever possible instead of id. id has high specificity which can lead to a lot of issues on the larger project. It's best to keep the CSS specificity as low and flat as possible. 😉

I hope this helps!