QR-code component using CSS Flexbox

Hi 👋, regarding your question:

• The page content could be centered using Grid or Flexbox (as you did 👍), but it is better to use min-height: 100vh; for the body, as using height causes the page to be cut off in viewports with small height (such as mobile landscape orientation).

And I take the opportunity for another comment if you don't mind:

• Be careful with using font-size: 10px in the root element as that trick is no longer commonly recommended because it can cause issues with accessibility and readability. Also, it’s good to get used to thinking directly in relative units like rem or em since they are the most suitable for most cases.

I hope it’s useful 🙂

Regards,

Congratulations on completing the challenge! That's a great achievement, and I'm sure you put a lot of effort into it. I really liked the way you approached the challenge and the code you wrote. You demonstrated a good understanding of the concepts and applied them effectively to solve the problem.I have a few suggestions to improve your code further. When it comes to centering a div or any element on a webpage, using margins may not always be the best approach. so use flexbox or grid layout for centering the div. make the container center properly use min-height:100vh which is used to ensure that a container or element takes up at least the full height of the viewport (the visible area of the browser window) regardless of the content inside it.

Here's an example code snippet:

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