Order Summary Component with flex

Community feedback

• 

  Vanza Setia•27,775

  @vanzasetiaPosted about 2 years ago

  Hi, Salman! 👋

  Congratulations on finishing this challenge! 🎉

  One suggestion I have is to leave the alternative text empty (alt="") for the music icon and the illustration. Those are decorative images. It means that they don't add any meaningful information to the page. This will tell the screen reader to simply skip over the image.

  I recommend visiting the Solid Start website. Right there, it will give you an overview of web accessibility. Knowing about web accessibility will impact the way you write your code significantly.

  I hope this helps! Happy coding!

  Marked as helpful

  1

  ---

  

  Salman Maqbool•80

  @MXalmanPosted about 2 years ago

  @vanzasetia Thank You!

  0

  

  Vanza Setia•27,775

  @vanzasetiaPosted about 2 years ago

  @MXalman You are welcome!

  0
• 

  Mohan Krishna•160

  @Mohan823Posted about 2 years ago

  But it's not shrinking itself when review responsive design. Review my project here: https://www.frontendmentor.io/solutions/order-summary-using-grid-and-flex-tc2TOYFWCb

  I also added padding both sides that u skipped when reviewing in mobile layout.

  Marked as helpful

  0

  ---

  

  Salman Maqbool•80

  @MXalmanPosted about 2 years ago

  @Mohan823 Thank you!

  0
• 

  Melvin Aguilar 🧑🏻‍💻•61,140

  @MelvinAguilarPosted about 2 years ago

  Hi @MXalman 👋, good job for completing this challenge!

  Here are some suggestions to improve your code:

  • Use max-width: 350px to main selector instead of width.
  • Use min-height: 500px to main selector instead of height.
  • You can use <picture> tag when you need to change the image on different viewports, in this case it would be enough to use the div element, or use the image directly since the style of the <picture> is not modified, also remember to update the image with width: 100%;.
  • You should use the <a> tag to cancel the order

  <a href="#" >Cancel Order</a>
  

  I hope those tips will help you.

  Good Job and happy coding !

  Marked as helpful

  0

  ---

  

  Salman Maqbool•80

  @MXalmanPosted about 2 years ago

  @MelvinAguilar Thank you!

  1