QR code flexbox update

👾Hi @Alfo-code, congratulations on your first solution!👋 Welcome to the Frontend Mentor Coding Community!

Great solution and a great start! From what I saw you’re on the right track. I’ve few suggestions for you that you can consider adding to your code:

Your component is okay but it's missing the vertical alignment. The best way to do it is by using flexbox. The first step is to add min-height: 100vh to make the body height size becomes 100% of the screen height, this way you make sure that whatever the situation the child element (the container) aligns the body and then use the flex properties for alignment with display: flex / align-items: center; / justify-content: center;. If you're using the attribution you need to add flex-direction: column to make the attribution stays under the QR Code component. See the code below:

body {
    min-height: 100vh;
    background-color: hsl(212, 45%, 89%);
    font-family: 'Outfit', sans-serif;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

✌️ I hope this helps you and happy coding!

you have done a good job bro.....try improving it further