Skip to content
Submitted over 2 years ago

Order Summary Component

Luyanda•40
@lmaqungo
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

I struggled with centering the main-cta section (check my html for context) after giving it a width of 85%. This element is wrapped inside a flex container that is meant to horizontally center it (with justify content). Before I had changed it's width however, it centered perfectly. I had to resort top margin{ 0 auto}; to center it the way you see it. Does this mean this mean that flexbox doesn't work when the element you're trying to center has a custom width?
Any help is appreciated

Community feedback

  • Vanza Setia•27,775
    @vanzasetiaPosted over 2 years ago

    Hi, Luyanda! 👋

    Great work on this challenge! Your solution looks pretty good! 😀

    Regarding flexbox,

    • First, no matter how much width the child element has, as long as the parent element has display: flex; and justify-content: center;, then the child element would be centered horizontally.
    • Second, the current HTML markup is a little more complex than it should. You can simplify it by making the body element as the flex container and making the main element as the card element instead.
    • Third, there's no need for margin to center the card. I would recommend adding padding to the body element to prevent the card from having full width and full height on mobile view.
    • Lastly, the only thing that the card is needed is a max-width with a rem unit. Currently, the card looks so big on some breakpoints like on 900px, >1440px, etc.

    That's it! I hope this information is useful! 😁

    1

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