Order Summary Component Challange with Vanilla HTML & CSS

Community feedback

• 

  Adriano•42,840

  @AdrianoEscarabotePosted 5 months ago

  Hi Kamal Redzwan, how are you doing? I really loved the outcome of your project, but I have a few suggestions that I think might be helpful:

  To prevent the background image from breaking at higher resolutions, we can prevent this in two different ways:

  • Add a background-repeat: repeat-x;, the image will repeat on the horizontal axis, preventing it from breaking.

  • Add a background-size: 100% 50vmin;, the 50vmin will set its height as the page target, and 100% will make it stretch on the horizontal axis.

  Feel free to choose one of the two!

  The rest is excellent.

  I hope you find it useful. 👍

  Marked as helpful

  1

  ---

  

  Kamal Redzwan•210

  @kmlrdzwnPosted 4 months ago

  @AdrianoEscarabote Hi Adriano!

  Thank you so much for your detailed and helpful suggestions. I really appreciate you taking the time to provide guidance on improving the background image's responsiveness.

  The CSS tips you shared about using background-repeat: repeat-x; or background-size: 100% 50vmin; are fantastic, and I have just implement them.

  I love learning something new every day, and your feedback has definitely been a great opportunity for me to improve my coding skills. The code now looks superb now. Thanks again! :D

  1