Design comparison
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
- @danielmrz-devPosted 10 months ago
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 helpful0 - @RyanAbdaulPosted 10 months ago
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 GitHubJoin 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