Skip to content
Submitted over 2 years ago

Order Summary with HTML and CSS Flexbox

Felipe•40
@FelipeBMost
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

My third project. I can't seem to grasp how to adjust elements vertically on flexbox. I set up the ".row" and "display flex" on parent together with "align-items" and "justify-content" everywhere and the "Change" element stil wouldn't center. I had to adjust it's margin to make it centered.

Community feedback

  • Curtis Simpson•550
    @crsimpson5Posted over 2 years ago

    Hey Felipe, nice job on your solution 🙂

    It looks like your .container a:last-child selector is targeting the Change button as well as the Cancel Order button. If you change that selector to .cancel, and then remove the extra margins on the Change button, that should fix your issue.

    You can also try adding some box-shadows -> MDN.

    Marked as helpful
    1
    Felipe•40
    @FelipeBMostPosted over 2 years ago

    @crsimpson5 Thanks! That solved it perfectly. I'll likely stop using pseudo-selectors since it gets hard to keep track of them later on the project.

    I'm kinda blind for shadows, thanks for mentioning them.

    0
  • Just9krish•590
    @Just9krishPosted over 2 years ago

    Bro first push your code to git hub i can't see your code

    1
    Felipe•40
    @FelipeBMostPosted over 2 years ago

    @Just9krish Bro, I forgot to do that kinda important step. It's live now.

    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