Submitted 5 months ago

Social Links

Leanne Keenan• 140

@leannekeenan

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

This is a solution for...

Social links profile

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

What are you most proud of, and what would you do differently next time?

I used the ": root" properties to keep the code DRY.

I Imported the Google fonts into CSS directly instead of embedding the link in HTML which helped improve separation of concerns, the guiding principle behind clean code.

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

To center the content of the social media container, I found that instead of setting the social media container to a flex object and adjusting its justify-content and align-items to center, I decided to do something different by translating the body of the DOM, maintaining a 10% spacing from the top and bottom of the container to keep the element square in the center of the DOM.

Addendum: I took the advice of @Abdul Khalid and modified my code to reflect his recommendations. The container object is now centered as a grid object - way easier. Thanks for the suggestion

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

Any recommendations on building the project more efficiently or to a higher standard are always welcome. Feel free to contact me at https://leannekeenan.netlify.app

Community feedback

Abdul Khaliq 🚀• 72,660

@0xabdulkhaliq

Posted 5 months ago

Hello there 👋. Congratulations on successfully completing the challenge! 🎉

I have a suggestion regarding your code that I believe will be of great interest to you.

CSS 🎨:

Looks like the component has not been centered properly. So let me explain, How you can easily center the component without using margin and transform.

We don't need to use margin and transform to center the component both horizontally & vertically. Because this approach will not dynamical centers our component at all states

To properly center the component in the page, you should use Flexbox or Grid layout. You can read more about centering in CSS here 📚.

For this demonstration we use css Grid to center the component.

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

Now remove these styles, after removing you can able to see the changes

body {
  transform: translate(0, 10%);
}
.container {
  margin: 0 auto;
}

Now your component has been properly centered

I hope you find this helpful 😄 Above all, the solution you submitted is great !

Happy coding!

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