Submitted over 1 year ago

Responsive Blog Preview Card

sass/scss

pauzuffinetti•90

@pauzuffinetti

A solution to the Blog preview card challenge

Preview Code

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.

Code

Please log in to post a comment

Community feedback

Biskup85•220
@Biskup85
Posted over 1 year ago
Try doing .bigcontainer flex and .cardcontainer give align-self: center. And .bigcontainer make height: 100vh.
P
Daniel 🛸•44,810
@danielmrz-dev
Posted over 1 year ago
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!
Luis Fernando RS•160
@Kaelldrick
Posted over 1 year ago
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

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