Qr code using flex display

Community feedback

• 

  Ted Rinquest•440

  @climb512Posted over 1 year ago

  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!

  2
• 

  Aimal Khan•2,260

  @Aimal-125Posted over 1 year ago

  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.

  1

  ---

  

  Vinitoider•30

  @VinitoiderPosted over 1 year ago

  Like this? @media (max-height: 400px) { body { min-height: 150vh; } }

  0
• 

  Boots 😺•1,590

  @adityaphasuPosted over 1 year ago

  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!🕺🏻

  1