Responsive QR code card using flexbox

Community feedback

• 

  Toluwaa•1,040

  @Toluwaa-oPosted almost 2 years ago

  Concerning your question, this should work:

  body { max-width: 100vw; min-height: 100vh; display: grid; place-content: center; }

  Max-width specifies the maximum width of the page and 100vw is a relative unit so it adapts to each device. Likewise min-height. It specifies the minimum width of the page. Setting it to 100vh means it will always take up the whole screen. VW means view width and VH means view height. For more info https://www.w3schools.com/cssref/css_units.php

  You don't have to use the display grid/place content i used. But i suggested it because it takes less time to write and it has the same effect as using both justify-content & align items.

  And lastly, I'd recommend adding padding to the container instead of adding it to each individual element in the container, that way they all align properly.

  I hope these suggestions are helpful, let me know if you have any other question.

  Marked as helpful

  1
• 

  Fernando Laxi•690

  @ferlaxiPosted almost 2 years ago

  the container was not centered because a height value was not defined. You should put in the css file in body: height: 100vh; and remove the margin-top and voila! :) nice work! it looks really nice

  2