Skip to content
Submitted 9 months ago

Responsive Blog Preview Card

pauzuffinetti•90
@pauzuffinetti
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Blog preview card
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

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

  • Biskup85•220
    @Biskup85Posted 9 months ago

    Try doing .bigcontainer flex and .cardcontainer give align-self: center. And .bigcontainer make height: 100vh.

    0
  • Daniel 🛸•44,310
    @danielmrz-devPosted 9 months 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!

    0
    pauzuffinetti•90
    @pauzuffinettiPosted 9 months ago

    @danielmrz-dev thank you very much! I'll be adding it in future projects <3

    1
  • Luis Fernando RS•160
    @KaelldrickPosted 9 months 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

    0
    pauzuffinetti•90
    @pauzuffinettiPosted 9 months ago

    @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
    @KaelldrickPosted 9 months ago

    @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