Skip to content
Submitted 29 days ago

Social Media Links Challenge

Hannan-codes•70
@Hannan-codes
A solution to the Social links profile challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

What challenges did you encounter, and how did you overcome them?

Centering the card vertically proves to be challenging even when using the display:flex, i couldn't use it here because it just messed up my entire code when i tried so I had to eyeball it.

What specific areas of your project would you like help with?

Centering it. I'm never able to make it work.

Code

Please log in to post a comment

Log in

Community feedback

  • P
    lawless•180
    @djlaw90

    https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_flexible_box_layout/Aligning_items_in_a_flex_container >> great resource for centering a div with flexbox, both horizontally and vertically. I basically never do anything else now.

  • Marzia Jalili•6,730
    @MarziaJalili

    Nicely done!

    Here's the answer from the conqueror:

    ✅ For centering the card make sure the body element have only one child element.

    You can achieve this by wrapping everything inside the main element as follows:

    <body>
  <main> 
    <!-- All elements nested here... -->
  </main>
</body>

    ✅ Now apply the following styles to the body selector in CSS:

    display: grid;
place-items: center;
min-height: 100vh;

    This will perfectly center the card across all devices.

    😎😎😎

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