Submitted 4 months ago

Layout Using Flexbox

Justin Fulkerson•270

@JF451

A solution to the 3-column preview card component challenge

Preview Code

Solution retrospective

What are you most proud of, and what would you do differently next time?

I am proud of the way I used flexbox

What challenges did you encounter, and how did you overcome them?

Had some trouble centering the white layout

What specific areas of your project would you like help with?

I would like help centering the layout.

Code

Please log in to post a comment

Community feedback

Kuvashnee Naidoo•450
@KuvashneeNaidoo
Posted 4 months ago
Hi @JF451

Excellent work creating this 3 column preview card! Your HTML is semantically correct after I tested it using The W3C Markup Validation Service 👏⭐👏

To help you to center the layout, I would encourage you to use height: 100vh; in the body:
```
body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh; // Add this in
}
```
With this implementation, the body stretches to fill the full height of the screen, which allows align-items: center and justify-content: center to position the content right in the middle of the screen. So overall, height: 100vh; creates enough vertical space for centering to work.

I hope this helps 🙏

Happy coding :) 🚀🚀🚀
Archit Anirudhan•160
@4rch1tT
Posted 4 months ago
You can use display: grid, place-items: center and height: 100vh this will center the div. Hope this helps.

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