Responsive order summary component

Community feedback

• 

  Travolgi 🍕•31,400

  @denieldenPosted over 2 years ago

  Hi Rina, great work on this challenge! 😉

  Here are a few tips for improve your code:

  • for add the top image in the background just put more specific background properties to the body:

  background: url("../img/pattern-background-desktop.svg") no-repeat top center;
  background-size: contain;
  background-color: #e0e8ff;
  

  • centering with absolute positioning is now deprecated, it uses modern css like flexbox or grid
  • remove all margin from .container class because with flex they are superfluous
  • use flexbox to the body to center the card. Read here -> best flex guide
  • after, add min-height: 100vh to body because Flexbox aligns child items to the size of the parent container
  • 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!

  Marked as helpful

  1

  ---

  

  Rina•100

  @dodrinPosted over 2 years ago

  @denielden thank you for your feedback. I totally forgot about the background img haha your feedback would helm me improving! cheers happy coding

  1
• 

  Alazar Getachew•260

  @AlazarG19Posted over 2 years ago

  nice solution every thing is perfect but try giving margin or padding between the button and description and try increasing the card size so that it can be exact i would advice you to use the tool perfect pixel to create the exact solution download the perfect pixel extension and it would be helpful trust me

  2

  ---

  

  Rina•100

  @dodrinPosted over 2 years ago

  @AlazarG19 Thank you for your feedback and recommendation of the tool! I will definitely have a look. Cheers

  0
• 

  P

  Fluffy Kas•7,715

  @FluffyKasPosted over 2 years ago

  Hiya,

  It seems really good! I suggest instead of using that very bright purple colour for your button hover (Proceed to payment button), try keeping the original colour but with reduced opacity (0.8 or something). At the moment, this bright colour makes it super hard to read the text inside.

  1

  ---

  

  Rina•100

  @dodrinPosted over 2 years ago

  @FluffyKas Thank you for your feedback. good point! Cheers

  0