Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Order Summary Card using HTML CSS Flexbox

@godwin-okechukwu

Desktop design screenshot for the Order summary component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

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,420

@correlucas

Posted

πŸ‘Ύ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

Posted

@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
Discord logo

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