Hi there! Did an easier task for today but I've always had this problem even with past challenges. I need help in aligning the container at the center of the page. I use margin auto to center it row-wise but column-wise it's just up there so I use margin-top to fix the problem. I don't know if that's a good option though.
Feedback welcome :))
@VCarames
Posted
Good job on your project.
For simple problems like these, I usually add the following to the body:
height: 100vhdisplay: flexjustify-content: centeralign-items: centerAdding these will center you content, regardless of screen size.
Marked as helpful
@vanzasetia
Posted
Hello there! 👋
Good effort on this challenge! 👍
Using margin may make it looks like in the middle of the page on your view or your device. But, in my perspective, the card is at the bottom of the page.
So, I recommend using flexbox to make the card in the middle of the page. I suggest making the body element as a flex container instead of using any extra HTML markup.
One feedback - Avoid using header for the card content since it is not a complete website. This is one chunk of content that all belong together and in a real website would sit with other content.
I hope this helps! Happy coding! 😄
Marked as helpful
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
