Mobile First Flexbox CSS Order Summary Card

Community feedback

• 

  Travolgi 🍕•31,400

  @denieldenPosted over 2 years ago

  Hey Chris, congratulations on completing the challenge! You did a great job 😉

  Let me give you some little tips for optimizing your code:

  • To fix 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;
  

  • remove all unnecessary code, the less you write the better as well as being clearer: for example the header tag and the div containers of image
  • remove all margin from container, main and body elements
  • use flexbox to the body to center the card. Read here -> best flex guide
  • after, add min-height: 100vh and margin: 0 to body because Flexbox aligns child items to the size of the parent container
  • instead of using px and % use relative units of measurement like rem -> read here

  Hope this help! Happy coding 😁

  Marked as helpful

  0
• 

  Chris Mulvany•120

  @ChrisMulvanyGHPosted over 2 years ago

  Thanks Deniel

  Excellent tips very much appreciated.

  • Length of code is definetely something I will be refining.
  • margin great tip and will set-up a default CSS/SCSS file with this info.
  • display: flex on the body for some reason I never thought of this. Thanks for the link.
  • px and %, I have started using rem and ems but for some reason don't have them set-up in the project, I'll make sure to ammend.

  Brilliant advice!

  Regards

  Chris

  0