Order Summary Card Challenge

Community feedback

• 

  Hassia Issah•50,650

  @HassiaiPosted over 1 year ago

  To center .card on the page using flexbox, replace the height in .container with min-height: 100vh.

  There is no need to give .card and .info a height value rather the padding value for .info will replace it. This will prevent the content from overflowing on smaller screens.

  For a responsive content, replace the width in .card with max-width.

  Give .proceed-payment a box-shadow value with a color of hsla(245, 75%, 52%, 0.4).

  Use relative units like rem or em as unit for the padding, margin and width values, instead of using px which is an absolute unit. For more on CSS units Click here

  In the media query, you have to change the background-image of the body.

  Hope am helpful.

  Well done for completing this challenge. HAPPY CODING

  Marked as helpful

  1

  ---

  

  P

  Bhoami K Khona•360

  @bhoamikhonaPosted over 1 year ago

  @Hassiai

  Hi there! Thank you for all of your comment! I have pretty much applied all the recommended changes except for using rem or em as unit and that is because I am still learning about CSS units. I don't entirely understand how em and rem work so, I'll read about it a little and then update the code once more. I appreciate your help, it definitely improved my design. Thank you! :)

  0