@danielmrz-dev
Posted
Hello, Joe!
Very nice project! It looks great!
I have a quick tip for you!
You can place your card in the middle of the page by doing this:
body {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
If you do that, you don't need to use margin-top
to place your card in the middle! It's simple and helps a lot. I hope it's useful!
Other than that, great job!
Marked as helpful
@Islandstone89
Posted
@danielmrz-dev Since the body has 2 children (main and footer), it also needs a flex-direction: column
, as we don't want the children to be side by side (default value of flex-directon is row). So, it might be a good habit to include that one as well, even if the Flex container only have 1 child.
I would also add that height
should be min-height
. This allows the body to grow vertically beyond the viewport, if needed.