Skip to content
Submitted 2 months ago

Social Links Page in HTML/CSS

Sean Chen•140
@chenmeister
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?

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

  • Aleksei Bodeev•370
    @alekseibodeevPosted 2 months ago

    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

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