Submitted 1 day ago

Result page using display: flex and flex-grow

João Vitor Princesval Caetano• 60

@Princesval

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

Results summary component

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

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

Using flex-grow to create the summary section.

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

media query

Community feedback

Svitlana Suslenkova• 3,450

@SvitlanaSuslenkova

Posted about 19 hours ago

body { display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: 100vh; } Try this to align(top-bottom) and justify(left-right) your project to the center. It applies to the parent component(body), don't forget about !!min-height!!. You can use grid instead of flex too.

Marked as helpful

Please log in to post a comment

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