Responsive Order Summary Component | HTML CSS

Community feedback

• 

  darryncodes•6,350

  @darryncodes

  Posted over 3 years ago

  Hi Maianne,

  Congrats on completing your 2nd challenge, really well done on this one!

  • i'd recommend a few tweaks to your background styles and ensure they persist on smaller devices: /* background-position: top; */ remove background-size: 100% auto; update background-color: hsl(225, 100%, 94%); add
  • your width: 80vw; is playing havoc with your card and image size at some screen sizes. It's good practice to use max-width to dynamically control the width
  • this is a useful small guide on which css units to use
  • it might cool to add cursor: pointer; to your 'proceed to payment' button

  Keep up the momentum!

  01

  Marked as helpful
• 

  Mario•130

  @ohmymario

  Posted over 3 years ago

  Great job on this!

  I would suggest maybe adding a background-color to your body element. Your background-image is partially transparent so it should show through. This should help with the bottom of your card getting lost in the background on desktop view. 😁

  01

  Marked as helpful
• 

  Sarah•835

  @sarahc-dev

  Posted over 3 years ago

  Hey! This is looking good. Just a couple of suggestions to help you - you don't need to use a media query for the mobile size. That should be the default, and only use a media query for larger screens. You have a weird situation where you lose the background and the card grows too big between 375px and the large screen media query. You can use a max-width on the card to prevent it growing too much before the media query kicks in.

  Also add some blur to the box shadow to make it less harsh e.g box-shadow: 0px 20px 8px hsl(228deg 45% 96%);.

  Hope that helps :)

  01

  Marked as helpful