Submitted almost 3 years ago

Order Summary component using HTML/CSS

Marko Djurdjevic•330

@Frozennn

A solution to the Order summary component challenge

Preview Code

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.

Code

Please log in to post a comment

Community feedback

Adrian•160
@Adrianmbugua
Posted almost 3 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

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