Mobile First Flexbox CSS Order Summary Card

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 😁

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