Order Summary Component using flexbox

Community feedback

• 

  CyrusKabir•1,885

  @CyrusKabirPosted over 2 years ago

  hello my dear friend ♥ you did good on this challenge and here some improvements :

  • it's better approach to start with mobile first (or mobile first approach) and use min-widht instead of max-width in @medias ;
  • if you look to main design in card we have more paddings and margin to have a card closer to design you can use image coparison slider or this browser extension Perfect Pixel

  Marked as helpful

  0

  ---

  

  Mohammed Abbas•390

  @Mohammedabbas7Posted over 2 years ago

  @CyrusKabir Thanks for that

  1
• 

  Travolgi 🍕•31,400

  @denieldenPosted over 2 years ago

  Hi Mohammed, great work on this challenge! 😉

  Here are a few tips for improve your code:

  • add background-size: contain to the body fox fix the image bg
  • add main tag and wrap the card for improve the Accessibility
  • remove all unnecessary code, the less you write the better as well as being clearer: for example the div container of image and comments
  • remove all margin from .order-card class because with flex they are superfluous
  • add transition on the element with hover effect
  • instead of using px use relative units of measurement like rem -> read here

  Overall you did well 😁 Hope this help!

  0

  ---

  

  Mohammed Abbas•390

  @Mohammedabbas7Posted over 2 years ago

  @denielden I appreciate your feedback that is so helpful.But the second feedback i didn't get it

  1

  

  Travolgi 🍕•31,400

  @denieldenPosted over 2 years ago

  @Mohammedabbas7 What second feedback do you mean they haven't received?

  0

  

  Mohammed Abbas•390

  @Mohammedabbas7Posted over 2 years ago

  @denielden add main tag. In my markup i added the main tag

  1