Skip to content
Submitted 3 months ago

Solution for the FrontendMentor challenge "Social links profile"

FrostyyShooter•20
@FrostyyShooter
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Social links profile
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

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

I encountered an isue with using flexbox in CSS. The main element wouldn't center vertically. After i added a "height" of 100vh to the body (where the display: flex is) it would center it vertically as it should.

Community feedback

  • Muhammad Rohan khan•170
    @rohankhan5655Posted 3 months ago

    First u flex use on element container for example

    <div class= "card-container"> <div class= "card1"> </div> </div> " To center the card fist give width and height 100vw and 100vh to the card-container , Use flex css justify -content center == center item horizontilly and align-items center == center item vertically then ur card become on center :), grid and Flex are used on parent elements and they also have some child property search on w3school for better understanding
    Marked as helpful
    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