Skip to content
Submitted over 2 years ago

Order Summary Component

Jeremy Lloyd•310
@jeremylloyd
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

Took about 30min. Getting faster :)

Community feedback

  • バレンタイン 😈•64,170
    @VCaramesPosted over 2 years ago

    Congrats on completing this challenge!

    To center you card into you page you want to add the following to your *<body> element; body { min-height: 100vh; display: flex; justify-content: center; align-items: center; }

    Next, you'll want to delete the height: 570px (your content will create the height) and the margin (no longer needed with the above code) from your <main> element. Once you've done that, change your width: 325px to max-width: 325px (to make it responsive)

    Lastly, to make your content semantically correct, you'll want to change you <main> element to <article> element

    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