Design comparison
Solution retrospective
The challenging part was vertically centering the card. I ended up using 'vh' and 'vw' to size the card. I noticed that when I specified height to 100% on card to get to center vertically it didn't work, however, after I had changed from percentage to 'vh' it seemed to work. Other than that I couldn't get it an exact match with the specified font size on the paragraph element (Ended up making it a bit bigger). I do notice that it does not respond to smaller sizes, but the challenge didn't require a responsive design. Hopefully, the solution I chose is NOT terribly done.
Community feedback
- @FahatmahPosted about 2 years ago
Hey there! Nice work!
I see in your code that your body is having
height: 100%;
, instead of thatmin-height: 100vh;
and use flexbox or grid layout. This layout are used when you want to center your card. For example you can dodisplay: flex; align-items: center; justify-content: center; min-height: 100vh;
And then you can give size or padding in your card. I don't think vh unit are suit to size your card because it is basing on the screen size, that is why it gets bigger and not responsive or fluid. I use % and then giving it a
max-width
ormax-height
. Or I use rem unit.Hope this helps! Keep Coding!
Marked as helpful1
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