Skip to content
Submitted about 3 years ago

Order Component Card Finished

Alberto Castro Flores•130
@AlbertoCastroF
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

how can i know how many containers i should use when creating semantic html? how can i make sure to center a single element on the screen properly?

Community feedback

  • Danilo Alves 🎧•535
    @mizek1Posted about 3 years ago

    You can use flexbox properties like align-items and justify-content, for example, to center elements on the screen or with parent containers. There is a nice tutorial you can read and learn more about it: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

    Marked as helpful
    2
    Agata Liberska•3,995
    @AgataLiberskaPosted about 3 years ago

    @mizek1 What Danilo said, just make sure to set the body's min-height to 100vh - that will allow you to center the card vertically as well. display: grid; place-items center; would work too :)

    1
    Alberto Castro Flores•130
    @AlbertoCastroFPosted about 3 years ago

    @AgataLiberska @mizek1 thanks to both for the advice.

    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