Skip to content
Submitted almost 2 years ago

Responsive Order Summary

Secre•210
@SecreSwalowtail
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Order summary component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

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?

Community feedback

  • Vanza Setia•27,775
    @vanzasetiaPosted almost 2 years ago

    Hi, Secre! 👋

    About the issue, I recommend removing the margin: 0 2rem 0 2rem; from the .summary__card. Then, set some padding 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 of height on the <body> element.

    I hope you find this useful.

    Marked as helpful
    0

Please log in to post a comment

Log in with GitHub

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