Responsive Order Summary Component | HTML CSS

Community feedback

• 

  darryncodes•6,370

  @darryncodesPosted almost 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!

  Marked as helpful

  0

  ---

  

  Maianne Thornton•20

  @MaianneThorntonPosted almost 3 years ago

  @darryncodes Thank you so much for your suggestions! I was able to implement your notes and solve many of my issues. Thank you for taking the time to look over my code, I really appreciate the assistance and the resources you provided! 😀

  1
• 

  Mario•130

  @ohmymarioPosted almost 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. 😁

  Marked as helpful

  0

  ---

  

  Maianne Thornton•20

  @MaianneThorntonPosted almost 3 years ago

  @ohmymario Thank you for your feedback! Adding the background color really helped to make the card pop out! Thanks again, I appreciate you taking the time to reach out 😀

  0
• 

  Sarah•835

  @sarahc-devPosted almost 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 :)

  Marked as helpful

  0

  ---

  

  Maianne Thornton•20

  @MaianneThorntonPosted almost 3 years ago

  @sazzledazzle Thank you so much for your feedback! Your suggestion to blur the box-shadow was really helpful! Thanks again, I appreciate you taking the time to look over my code 🙂

  0