Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Social Links Page in HTML/CSS

@chenmeister

Desktop design screenshot for the Social links profile coding challenge

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?

I am glad I have completed this project faster than anticipated.

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

I wanted to make the card element centered on all sides but had to use margin to do it.

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

I was wondering if there is any way I can make the h2 and p elements appear next to each other so that the Name and Location items can look the same as the one in the solution. Also, if anyone has a more effective approach in getting the Card item centered on all sides that would be awesome. Any feedback is greatly appreciated.

Community feedback

@alekseibodeev

Posted

Hi 👋 Nice solution!

If I understand it correctly you want to reduce spacing between h2 and p elements. You can achieve it by reducing margins on those elements. For example:

h2 {
  margin-bottom: 0;
}

p {
  margin-top: 0.25rem;
}

But it's better to replace type selector with class ones.

To center card you can use the following code snippet:

.container {
  min-height: 100vh;
  display: grid;
  place-content: center;
}

body {
  margin: 0; /* will remove unnecessary scroll bar */
}

Marked as helpful

0

Please log in to post a comment

Log in with GitHub
Discord logo

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