Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Order Summary Page using Flexbox

Ayush Nath 360

@Beats-Ayush

Desktop design screenshot for the Order summary component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Having some problems with media-queries.

When font-size(rem) is defined for an element, it inherits the font-size from the root 16px but when not defined, it inherits the font-size from the body. Whereas we can change the font-size of body, changing font-size of root element is frowned upon. How to proceed in such cases? Simply changing the font-size of each element individually in media-queries is a monumental task.

Community feedback

Travolgi 🍕 31,420

@denielden

Posted

Hi Ayush, I took some time to look at your solution and you did a great job!

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;

Also remove all margin from card class because with flex they are superfluous

Overall you did well :)

Hope this help and happy coding!

Marked as helpful

0

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord