Skip to content
Submitted about 2 years ago

Order Summary component using HTML/CSS

Marko Djurdjevic•210
@Frozennn
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

Overall it wasn't difficult but I had a bit of trouble with positioning information regarding price.

I was using flex-box and I wanted to use justify-content: space-between for the "Change" text and the rest of the content but it wasn't working the way I wanted it to.

Later I figured out that because I was using padding the start line was near the middle of the container and so using space-between didn't do anything cause there was no space to begin with. By reducing the padding I managed to fix the problem.

If you guys have some suggestions on how I could have done this challenge better please let me know.

Community feedback

  • Adrian•160
    @AdrianmbuguaPosted about 2 years ago

    I used grid template areas for that section and justify-self for spacing the music icon and the change text it worked out quite well. will be uploading later

    .plan{ display: grid; grid-template-columns: 1fr 2fr 1fr; grid-template-rows: 1fr 1fr; grid-template-areas: "music_icon annual_plan change " "music_icon price change" ; }

    Marked as helpful
    0
    Marko Djurdjevic•210
    @FrozennnPosted about 2 years ago

    @Adrianmbugua Cool looking forward to seeing it :)

    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