QR code component using CSS Flexbox

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.

Hey @schwalbj, congratulation on completing the challenges.

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

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.