Frontend Mentor | Order Summary Component coding challenge solution

@roadblock37

Posted almost 2 years ago

The first thing I would do is wrap the image and annual plan in a parent flex container and then make class plan space-between. Something like this:

This way you can position the image and annual plan in its own container And use the plan container to position the child containers using justify-content: space between;

And of course your padding will change in the plan div. Most likely it will be equal padding on all 4 sides. I would start with 1rem and go from there.

shojoDev• 50

@shojoDev

Posted almost 2 years ago

Hello @roadblock37, I made the changes you suggested but I am still having issues with how to go about styling it in the 'main.css' file. If possible, could you style and comment it out for me???

Thank you.

Paul Biber• 100

@roadblock37

Posted almost 2 years ago

@shojoDev I just opened up my own repo so here is what i did. I added comments in this post to hopefully explain better than I did in my last response.

After looking at my own CSS I would recommend trying to do it better this was one of my first projects and my CSS wasnt very well done. Mainly pay attention the flex properties and getting your html containers nested correctly and you shouldnt have too much of an issue.

After that you will just need to mess around with your padding and/or margins, but this should at least give you a good starting point. here is the link to my repo if you think you might need it: https://github.com/roadblock37/order_summary.git

//parent flex container for section

<div class="priceFlex"> //music icon image <img src="./images/icon-music.svg" alt="music note" height="48px" width="48px" class="musicNote">

//container holding annual plan price and change button //this div is a flex container <div class="annualPriceFlex"> <p>Annual Plan $59.99/year</p> </div>

//change button <a href="#" class="change">Change</a> </div>

here is the css:

/* flex box for the annual price information*/ .priceFlex { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; width: 354px; height: 98px; background-color: #F7F9FF; border-radius: 8px; margin: 20px 0px; }

/* a child flex container of priceFlex for the annual price to be displayed in a column*/ .annualPriceFlex { display: flex; flex-direction: column; margin: 0 10px 0 20px; font-size: 1em;

}

Paul Biber• 100

@roadblock37

Posted almost 2 years ago

Hey I just created a fork of your repo and added the CSS changes that i recommended. you should be able to see it in your github. This is the first time ive tried to fork someone elses repo so I apologize if it didnt come through. Basically all i did was change the padding of class=plan to 1rem and changed the flex properties of the flex containers.

I wasnt looking at the design file so the positioning may still need to be tweaked. hope this helps and let me know if you have any other questions

Order Summary Component

Design comparison

Solution retrospective

Community feedback

Please log in to post a comment

Join our Discord community