Skip to content
Submitted about 2 years ago

Order Summary Card using HTML CSS Flexbox

Godwin Okechukwu•20
@godwin-okechukwu
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 could I have gotten the hero-image to center properly @ 375px (mobile)?

I initially wanted to set the card width to 375px (mobile), but when I noticed that the hero-image didn't fix well in the center.

Community feedback

  • Lucas 👾•104,400
    @correlucasPosted about 2 years ago

    👾Hello Godwin, congratulations for your new solution!

    Answering your question:To make this alignment, first of all remove all margins used to align and do this enterily with flex, by adding min-height: 100vh to the body to make the body display 100% of the viewport height (this makes the container align to the height size thats now 100% of the screen height) size and display: flex e flex-direction: column to align the child element (the container) vertically using the body as reference.

    👋 I hope this helps you and happy coding!

    Marked as helpful
    0
    Godwin Okechukwu•20
    @godwin-okechukwuPosted about 2 years ago

    @correlucas, thank you so much. I never thought along that line. I'm glad you reached out 👍

    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