Account Deleted
use grid
or flexbox
to center it, don't use margin
good luck
Marked as helpful
Hi I tried this challenge but was not able to centralize the page. Any recommendations?
Account Deleted
use grid
or flexbox
to center it, don't use margin
good luck
Marked as helpful
@0xabdulkhaliq
Posted
Hello there 👋. Congratulations on successfully completing the challenge! 🎉
CSS 🎨:
margin
or padding
.margin
and padding
to center the component both horizontally & vertically. Because using margin
or padding
will not dynamical centers our component at all statesFlexbox
or Grid
layout. You can read more about centering in CSS here 📚.Grid
to center the component.body {
min-height: 100vh;
display: grid;
place-items: center;
}
.card {
margin-left: 30%;
margin-right: 30%;
margin-top: 24%;
margin-bottom: 24%;
}
.
I hope you find this helpful 😄 Above all, the solution you submitted is great !
Happy coding!
Marked as helpful
@Mostafa-0
Posted
Good job on completing the challenge, as mousa said you can use flex or grid for centering but make sure you're using that on the container and not the card itself. Since you want to center the card , it has to be in a container that takes 100% width of the page so for example try using the main as the container and don't forget to give it a height as well so it can be centered vertically. One more thing, it's better to remove the width from the body as it may cause overflow and doesn't help with responsiveness. Goodluck!
Marked as helpful
@Blackysynch
Posted
Thanks I will try it in my next solution
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