Submitted 5 months ago

Social links profile

George Krause• 90

@georgekrause

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

HTML
CSS

1newbie

View challenge

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?

Community feedback

María López• 240

@oppahero

Posted 5 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

Please log in to post a comment

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