@vboechat
Posted
Beautiful! But you just forgot the card shadow.
1
حسان ونس• 60
@Hassan-Wanas
Posted
@vboechat Yes, thanks i will add this too.
0
Design comparison
Solution retrospective
how can I center the card vertically?
Community feedback
kxnzx• 870
@kxnzx
Posted
Hello @Hassan-Wanas,
Try this:
body { display: grid; place-items: center; margin-top: 20%; }
Also add a max-width and padding on the card.
Hope this helps you further!
0
ANAGHO EMMANUEL• 150
@Anagho
Posted
@kxnzx You should try using flex-box. body { display: flex; justify-content: center; align-items: center; height: 100vh; }
Marked as helpful
1
حسان ونس• 60
@Hassan-Wanas
Posted
@kxnzx Thanks for your time.
but it does not work and I think there is no need for a display grid and place items.
It just moves to the center a little because of the margin-top.
but do you have any idea about why the live link is not showing the right design?
0
حسان ونس• 60
@Hassan-Wanas
Posted
@Anagho yes, it works. thanks and I saw your code and will back to it again to learn more. I have one more question: why or how can I make the live link work correctly?
edit: I changed the hosting for my card and it appears now normally when I open the link here but not in the comparison.
0
Please log in to post a comment
Log in with GitHub
Join 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