Order summary component

Community feedback

• 

  TayAki79•160

  @TayAki79

  Posted over 2 years ago

  Hi @Swing95, congratulations on this challenge first.

  1. I see that you use display flex on class="plan" which is a beautiful thing thus you can align all the three elements (music-icon, plan-price and change) in one line. Unfortunately the justify-content doesn't really work since you don't want the gaps between those items having the same distance. So to me I guess the way you did it with margins is the easiest way to accomplish it. Another way is to use 'display: grid'. If you are familiar with this property it would be a beautiful thing to do to get a clean code.

  2. OK, now I did view your code =). I think the best way to understand width and height is to first understand, that the size of an element is relative to the size of the body and the size of the body is relative to the size of the html page. Since the html element is the parent of everything that comes next you can say that the html width and size will take up the whole screen. Now, if you set the body's width to a 100% this means that the body width take up the same size of the html width. Which means if you resize the width of your screen smaller or bigger the body's width will follow as well. The size of the html takes up the whole screen size which is 100vh (viewport-height). Here you can also use 100vh for your body element since the project only takes up 100vh or less. If you're not quite sure about the height I would recommend to use min-height of 100vh for the body element which means that your site takes up 100vh or more than this if you have i.e. more pages the user can scroll down.

  Alright! I hope this will take you any further and if not I'd love to work and learn together with you if you want to. Just hit me up!

  Best regards,

  AkraDEV

  00