@danielmrz-dev
Posted
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 used display: 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 helpful
@alexcoy06
Posted
@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.
