Responsive Order Summary

Solution retrospective
The content drifts to the left when the screen-width is under 400px. How can I make it respect the left-margin and stop it from doing that?
Please log in to post a comment
Log in with GitHubCommunity feedback
- @vanzasetia
Hi, Secre! 👋
About the issue, I recommend removing the
margin: 0 2rem 0 2rem;
from the.summary__card
. Then, set somepadding
on the<body>
element instead to prevent the card from touching the edges of the browser.I have some other suggestions.
- Don't use CSS Grid for every layout. The
.summary__card
and.card__body
should not be grid containers. Use CSS Grid for a multi-columns layout. - The illustration and music icon are decorative images. So, leave the alternative text empty (
alt=""
). - The "Cancel Order" and "Change" have interactivity. So, they should be wrapped by interactive elements instead of paragraphs.
background-size: fill;
is invalid CSS.- Set
min-height
instead ofheight
on the<body>
element.
I hope you find this useful.
Marked as helpful - Don't use CSS Grid for every layout. The
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