Design comparison
Solution retrospective
It wasn't hard or easy, it was just my first time coding something from scratch. So I found it very interesting having no reference to follow. I feel like the h1 font styling is a bit smaller, going bigger looked a bit more off.
Community feedback
- @danielmrz-devPosted 10 months ago
Hello @alexcoy06!
Your project looks great!
I noticed that you used
margin: auto
to place the card in the middle of the page. Here's a very efficient (and better) way to center the card, since you useddisplay: flex
on the body:- Apply this to the body (in order to work properly, don't use position or margins):
body { min-height: 100vh; display: flex; justify-content: center; align-items: center; }
I hope it helps!
Other than that, great job!
Marked as helpful1@alexcoy06Posted 10 months ago@danielmrz-dev thank you so much, and I really do appreciate. However, the reason the main isn't completely center is because I have a footer in a column flex with it. So it defaults to center vertically with the space that is left over. I couldn't figure out how to get it to ignore the footer and still keep the footer at the bottom. I probably could do it with a grid, but flex was easier, and visually without overlapping an image, looks correct. That's only because it's off center by the exact height of the footer, otherwise it may look closer to the bottom.
1
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