Skip to content
Submitted 7 months ago

Social links profile

George Krause•90
@georgekrause
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 are you most proud of, and what would you do differently next time?

For this project i learned about position using css. I had to adjust line height as well as width of elements to get the look i wanted.

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

The biggest problem i had was centering everything in the card. Once i figured that out my solution moved the line height to make it appear to have a lot of space between elements like and . It took some time to make it look right.

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

no

Community feedback

  • María López•240
    @oppaheroPosted 6 months ago

    Hey! :)

    To center content, display:flex is a good option

    With flex you can use the justify content and align elements properties.

    To center on the x-axis, you can use justify-content:center. And to center on the y axis, align-items: center

    The card will be centered according to the height of its container, to do this you can indicate the height of the viewport to the body. Like this, height: 100vh

    This way you could do without the margin-top and the margin-bottom that you have in the body

    Happy coding!

    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