Qr code using flex display

Just a note to elaborate on the main point of the advice which Boots left you:

Your Flexbox needs to have a height for the content to vertically center inside of.

As it stands, after removing the margin-top: 10vh; hack from .secaoQr your whole layout is just 445px tall, just the size of your content with padding. Making the min-height: 100vh; on the body (or even on just the menuQR div) will give it the full room to center in the page.

This is a very common point of confusion that most Flexbox tutorials do not stress enough.

Happy coding!

In your css code, increase the height of 120 or 150vh by using media query with max-height: 400px; so that your web app looks good on small heighted screens as mine samsung j3.

Hi! Nice job completing the challenge!🙌🏻

• You can vertically center the card by applying this to the body:

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

• After adding this, be sure to remove margin-top: 10vh from your section and it'll look good!

Happy coding!🕺🏻