Design comparison
Community feedback
- @Mohamedkh369Posted 4 months ago
Hello , first congratulations for finishing the challenge , you did a great work ! though i would like to point something for you , as you might have noticed, the card is not vertically centered in your page even though you applied the display : flex and the align-items:center on the body element , this issue could be resolved by simply adding "height: 100vh" property to the body element which is the parent element of the container div , if it has no specific height declared the flex container will have no specific height itself , it will be as tall as it's content , in this case the card is is taking the full height of the parent flex element(the body element ) which is why it doesnt appear centered . i hope this information will be useful to you andcongratulations again for finishing the challenge , good luck in the next one .
Marked as helpful1 - @Ghost-Writer-2Posted 4 months ago
I think you should add a little margin to the top and reduce the min width so the card doesn't take up the whole viewport width on mobile device. Let's connect I'd love to learn from you too Discord: Charlieee
0 - @GodskitchenPosted 4 months ago
Hello, you can apply "height: 100%" to "html" and "body" tags. It let you to align the card in center. Also you should check the template sizes, you have the wrong ones.
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