Biskup85• 220
@Biskup85
Posted
Try doing .bigcontainer flex and .cardcontainer give align-self: center. And .bigcontainer make height: 100vh.
0
Design comparison
Solution retrospective
What are you most proud of, and what would you do differently next time?
So, i'm still trying to make the containers be centered in the middle of the page and not just at the top. I've tried using flexbox, justify-content, align-items, but it's always at the top of the viewport.
For what i know, it's not a good practice to center containers using margin or giving the body element flexbo properties.
If anyone could give me a hand, i'd appreciate it a lot. Also excuse my english, if there's something you don't understand feel free to ask.
What challenges did you encounter, and how did you overcome them?
Centering the container.
What specific areas of your project would you like help with?
Centering the container lol.
Community feedback
Daniel 🛸• 44,230
@danielmrz-dev
Posted
Hello, @pauzuffinetti!
Your project is looking fantastic!
- You did everything right on centering the card. You just missed
min-height: 100vh.
Like this:
body {
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
I hope you find this helpful!
Keep up the excellent work!
0
pauzuffinetti• 90
@pauzuffinetti
Posted
@danielmrz-dev thank you very much! I'll be adding it in future projects <3
1
Luis Fernando RS• 160
@Kaelldrick
Posted
Si quieres centrar la tarjeta, en el cuerpo del documento debes de darle una altura, ya que el navegador no sabra como centrarlo si no especificas la altura.
body { min-height: 100vh};
Le agregas esa propiedad y quedara centrado :D
0
pauzuffinetti• 90
@pauzuffinetti
Posted
@Kaelldrick gracias t amo pero no es que es mala práctica darle propiedades al body? eso tenía entendido
0
Luis Fernando RS• 160
@Kaelldrick
Posted
@pauzuffinetti bueno como en este caso es solo para centrar un contenedor pues no hay problemas :p
1
Please log in to post a comment
Log in with GitHub
Join 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