Order Summary Page using Flexbox

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.
Please log in to post a comment
Log in with GitHubCommunity feedback
- @denielden
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
fromcard
class because with flex they are superfluousOverall you did well :)
Hope this help and happy coding!
Marked as helpful
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