Design comparison
Solution retrospective
Is there an alternative to using 100vh to define the container's size for flexbox? Something which will also cover the full width? I tried with 100% but that did not work?
Community feedback
- @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 applyingheight: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 helpful2@schwalbjPosted over 2 years ago@correlucas Thank you, Lucas! I will definitely keep that in mind for the next projects! :)
1 - @afaiz-spacePosted over 2 years ago
Hey @schwalbj, congratulation on completing the challenges.
- replace
height: 100vh;
withmin-height: 100vh;
in .container class.
1 - replace
- @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
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord