Order Summary Component

Community feedback

• 

  Adriano•38,060

  @AdrianoEscarabotePosted about 2 years ago

  Hi shojoDev, how are you?

  I really liked the result of your project, but I have some tips that I think you will enjoy:

  To prevent the background image from breaking at higher resolutions, we can prevent this in two different ways:

  1. Add a background-repeat: repeat-x;, the image will repeat on the horizontal axis, preventing it from breaking.

  2. Add a background-size: 100% 50vmin;, the 50vmin will set its height as the page target, and 100% will make it stretch on the horizontal axis.

  Feel free to choose one of the two!

  The rest is great!

  I hope it helps... 👍

  Marked as helpful

  0
• 

  Paul Biber•100

  @roadblock37Posted about 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:

  <div class=plan> <div class=parentFlexContainer> <img/> <div class=annualPlan> </div> </div> <div class=change> </div> </div>

  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.

  0

  ---

  

  shojoDev•50

  @shojoDevPosted about 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.

  0

  

  Paul Biber•100

  @roadblock37Posted about 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;

  }

  0

  

  Paul Biber•100

  @roadblock37Posted about 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

  0