Order-Summary-Component Challenge - HTML, CSS, Mobile First

Community feedback

• 

  Travolgi 🍕•31,400

  @denieldenPosted over 2 years ago

  Hi , good job! I took some time to look at your code and have some ideas for improving it:

  • 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 a div with absolute positioning is now deprecated, it uses modern css like flexbox or grid
  • use flexbox to the body for 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

  Overall you did well 😉

  Hope this help and happy coding!

  Marked as helpful

  0

  ---

  

  JStone1•20

  @JStone1Posted over 2 years ago

  @denielden Thank you for taking the time to have a look, I'll take this all into account on my next project! :)

  1
• 

  Tauhidul Islam Hasan•250

  @Tauhidul-islam-hasanPosted over 2 years ago

  It seems you don't fix your details section, and other 2 buttons. You can try these code on your codding. //for details section display: flex; justify-content: center; background-color: #EEE; padding: 1.5rem; border-radius: 3%; width: 80%; margin: 0 auto;

  //for proceed box-shadow: 0px 5px 5px rgba(0, 0, 0, .25);

  //for cancel order background-color: inherit;

  Marked as helpful

  0

  ---

  

  JStone1•20

  @JStone1Posted over 2 years ago

  @Tauhidul-islam-hasan Thank you I will try it out :)

  0