Skip to content
Submitted about 1 year ago

Responsive component using Grid & Flexbox

ChchEl-source•90
@ChchEl-source
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

Hello ! Could you give me a tip about positioning component so that it is always verticaly centered on the body ? I've tried using margin top on different width but it always seems to be whether too far from the top or too close on certain viewports.
would wrapping my compotent in a main section using flex & margin auto could help to ensure the component stays exactly centered ?

(it does matter for the screenshot front end mentor takes of solution :)) thanks in advance, best regards

Community feedback

  • Valter Oliveira•240
    @valvrauuPosted about 1 year ago

    Hello, to center, remove all these margins and use in the body:

    -display: flex; -align-items: center; -justify-content: center;

    Marked as helpful
    0
    ChchEl-source•90
    @ChchEl-sourcePosted about 1 year ago

    @Valvrauu thank you for you reply , i wrapped my div component in a <main> element and used flex , but i will sure use it on body element , so simple i didn't even think of it and struggled hard with margins! thanks again!

    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