Order summary component with Flexbox

Community feedback

• 

  Agnik Bakshi•480

  @Agnik7

  Posted over 2 years ago

  Hi, Congratulations on solving this challenge!!🎉🎉 I have some suggestions that I feel will help you improve a lot.

  • Instead of defining width, define the max-width for the container. When you define width, you are making the width of that element a constant, it will not be able to change automatically. However, when you are defining max-width, you are making the the width of the element variable, such that the width can decrease by itself depending on the screen size, thereby making the component responsive.

  • Try to use more relative units like em and rem for defining the size, instead of absolute units like px. The relative units help in better responsiveness of the component, as they will set the component's size in comparison to the screen size, and not on the fixed pixel value. To learn more info on CSS units, click here

  • If the font-size for the root element or the body is 16px, you don't need to define it. This is because the default font size of most browsers is 16px. So, even if you don't mention it, it will be automatically taken as 16px.

  • For the title Order Summary, replace the p tag with an h1 tag, since it is a header. Then you won't have to define the font-size or the font-weight, all will be taken care of by h1.

  • Instead of using font-weight, it is better to use the <b> tag, to make a piece of text bold. Both <b> and font-weight achieve the same result, however <b> will save you few extra lines of CSS. Use font-weight only when you have to alter the boldness of a text.

  Hope you find this comment useful. Have a nice day!!!

  14

  Marked as helpful