Submitted over 2 years ago

Order summary card with HTML5 & CSS and lots of FLEXBOX

Kiril• 170

@qirele

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

This is a solution for...

Order summary component

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

What do you guys think about using flexbox whenever you need to align something vertically or horizontally? I feel like I overused it in this page.

Community feedback

Travolgi 🍕• 31,420

@denielden

Posted over 2 years ago

Hi Kiril, good work!

For me flexbox is the best way to align and have excellent control of the elements in the shortest possible time.

I had a look at your solution and I have a few suggestions for you:

body need flex for align the card: height: 100vh; display: flex; align-items: center; justify-content: center;
in this case main does not need flex, margin and height but need display: block
section does not need flex you can manage spaces via padding

You did well overall ;)

Hope this help

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