Design comparison
SolutionDesign
Community feedback
- @correlucasPosted over 2 years ago
👾Hello Muhammad, congratulations for your solution!
Answering your question about the alignment:
I saw your code and there's two things you should add to the body and the div named card. First your need to apply
height: 100vh;
to display 100% of the viewport height and then usedisplay: flex;
and its alignment properties:justify-content: center; height: 100vh;
display: flex; background-color: hsl(217, 54%, 11%); align-items: center; justify-content: center; height: 100vh; }
The you add to the card another
display: flex;
for the alignment vertical to the div content withflex-direction: column
et voilà your card is aligned.display: flex; padding: 20px; width: 350px; margin: 0 auto; background-color: hsl(216, 50%, 16%); border-radius: 10px; flex-direction: column; }
I've tried that and works, try you too and write me here Muhammad. Hope it helps.
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