QR code component using CSS Flexbox

Community feedback

• 

  Lucas 👾•104,340

  @correlucasPosted over 2 years ago

  Hello Janina, congratulations for your solution.

  You can add the property min-width: 100vh; inside the body tag instead of applying height:100vh on the container, also the flex property, like in the following example:

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

  For the card you can also apply min-width instead of width this way when your page stretch also the content will be flexible once is the minimum is defined by min-width and width is a fixed valor.

  You can also apply *REM instead of PX to make your website better for more screens. You can have more info about here: https://uxdesign.cc/why-designers-should-move-from-px-to-rem-and-how-to-do-that-in-figma-c0ea23e07a15

  I hope this help you.

  Marked as helpful

  2

  ---

  

  Janina Schwalb•20

  @schwalbjPosted over 2 years ago

  @correlucas Thank you, Lucas! I will definitely keep that in mind for the next projects! :)

  1
• 

  faizan•2,420

  @afaiz-spacePosted over 2 years ago

  Hey @schwalbj, congratulation on completing the challenges.

  • replace height: 100vh; with min-height: 100vh; in .container class.

  1
• 

  Lorenzo•45

  @LorenzoChioPosted over 2 years ago

  Hey there You can use vw, the same way you use vh, which stands for viewport width. I hope this answers you question. Congrats on finishing the challenge.

  0