Skip to content
Submitted almost 3 years ago

Order summary card with HTML5 & CSS and lots of FLEXBOX

Kiril•170
@qirele
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Order summary component
  • HTML
  • CSS
1newbie

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,400
    @denieldenPosted almost 3 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

    0

Please log in to post a comment

Log in with GitHub

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