Order summary component solution

Community feedback

• 

  darryncodes•6,350

  @darryncodes

  Posted over 3 years ago

  Hi Xavi,

  I like your design, good job completing this one!

  • i'd add background-size: 100% auto; background-repeat: no-repeat; to your background styles to closer match the design
  • you could add transition: ease .3s; to your interactive elements to make the hover effect smoother

  All the best!

  01

  Marked as helpful
• 

  Hania B.•1,280

  @techanthere

  Posted over 3 years ago

  Good job @d3vcloud! Here are the few suggestions for you:

  1. I have tested your solution, the card is not centered vertically in small heights and that's probably because you need to add some vertical padding in body. It's better to add min-height:100vh; in body
  2. No need to apply styling on both html, body { } instead use body selector only
  3. The card has no padding in smaller screens, try considering mobile-first design and resize card such that it works on smaller screen, don't need media queries, you can just add max-width instead of width here and some padding on the "container" div .

  Good luck!

  01

  Marked as helpful