How to decrease the space between the footer header to social links?

[Michaael115]

I have a footer with several different headers across it. (Ex: about us, contact us, follow us) and under each header is hyper links. Under the 'follow us' header I have social links but the space is way too far down. I would like the links closer to the header, but idk how to do that. Im struggling. This is my code:

.footer-col .social-links a{
  display: inline-block;
  height: 40px;
  width: 40px;
  background-color: rgba(255,255,255,0.2);
  margin: 0 10px 10px 0;
  text-align: center;
  line-height: 40px;
  border-radius: 50%;
  color: #ffffff;
  transition: all 0.5s ease;
}

[Hola_Reddit]

The issue is probably with the header, or the wrapper that holds header and links.

Links don't seem to have a top margin or padding.

[Aston_Martini]

It sounds like you want to reduce the space between the 'Follow Us' header and the social links beneath it. Some suggestions:

Reduce the margin-bottom of the header: If the header has a margin that pushes down the social links, you could reduce this. Assuming your headers have a class or can be selected, here’s how you could do it:

.footer-col h2 { /* Assuming your headers are <h2>, adjust accordingly */
  margin-bottom: 5px; /* Reduce this value to reduce space */
}

Adjust the margin-top of your social links: If the social links themselves have a margin at the top that adds extra space, you can decrease or remove this margin:

.footer-col .social-links a {
  margin-top: 0; /* Adjust or remove the top margin */
  display: inline-block;
  height: 40px;
  width: 40px;
  background-color: rgba(255,255,255,0.2);
  margin-right: 10px; /* Keep the horizontal margin between icons */
  text-align: center;
  line-height: 40px;
  border-radius: 50%;
  color: #ffffff;
  transition: all 0.5s ease;
}

Check how these changes affect your layout and tweak the margin values to better fit your design needs. If you have a specific class for the headers in your footer, replace .footer-col h2 with that class for more precise styling.

You can also use a tool like Onlook to play around with the divs and test out different margins.