Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Flexbox Blog Preview

Harper 30

@harpsicord

Desktop design screenshot for the Blog preview card coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


This was my first completed html/css project, so it's obviously not great 😭

There's a lot of space between each of the flexbox elements compared to the example. How should this be fixed?

Also,, I think the only way I could center the whole flexbox was to use margin on it (so I ended up leaving it out), but I'm pretty sure that's not the best way to do it, I think- how should I do that?

Community feedback

Daniel 🛸 44,230

@danielmrz-dev

Posted

Hello Harper!

Your project looks great!

Here's how you can place elements in the middle of the page:

  • Apply this to the body (in order to work properly, you can't use position or margins):
body {
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

I hope it helps!

Other than that, great job!

Marked as helpful

0

@RyanAbdaul

Posted

Hey dude sup, I see you did make the design but you're only problem was how to fix it, I don't wanna tell you, I'm going to give you food for thought, I'll leave here a link for a vid you and then a link for an article so you read this article and watch that vid, so that you can learn many ways to align anything you want in several ways, an article about how to center your elements -> https://css-tricks.com/quick-css-trick-how-to-center-an-object-exactly-in-the-center/

a vid for that ->

https://www.youtube.com/shorts/njdJeu95p6s

please watch these and search about things and avoid asking people how can I do this or that so you learn more than one way to do the same thing, you did do great and hope to see you soon, fingers crossed🤞❤

0

Please log in to post a comment

Log in with GitHub
Discord logo

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