Responsive order summary component

Community feedback

• 

  Travolgi 🍕•31,300

  @denielden

  Posted over 3 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!

  11

  Marked as helpful
• 

  Alazar Getachew•260

  @AlazarG19

  Posted over 3 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

  21
• 

  Fluffy Kas•7,655

  @FluffyKas

  Posted over 3 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.

  11