Space between social media icons

Hi - I have a footer with linkedin, twitter, and youtube social media links. However, the icons are very close together. Is there a way to space them out?

I searched the forum, but could not find an answer. One post suggested adding the code below to “Additional CSS”. I did that, but that did not result in any change. Help please?

.widget-area #menu-social-profile-menu li {
padding: 5px 15px !important;
}

Hello there,

Please try adding this extra custom CSS code to Appearance > Customize > Additional CSS from your site dashboard.


.social-menu-widget li {
  padding-left: 5px;
  padding-right: 5px;
}  

Regards,
Kharis

Thanks - I tried it, did not change and the icons are still scrunched together. I changed the values to be higher…still no effect.

Hello there,

If you have other preceding custom CSS code, make sure it doesn’t contain any error. To verify, validate it with this tool.

Regards,
Kharis

I checked - it says “no errors found”. There was only one preceding entry, and doesn’t matter if I take it out or make social-menu-widget CSS first.

So…here is the really bizarre thing. I wrote the following CSS:

.widget.widget_fp_social li {
padding-left: 5px;
padding-right: 5px;
}

Nothing happened. Now, if I type the following “.footer-widgets” above it, the padding appears (am checking in customize view). It disappears if I add anything after .footer-widgets. Am new to CSS…not sure why the padding would appear and disappear in this manner…

Hello there,

In order to help me easier getting the exact code, please share your site URL here.

Regards,
Kharis

Here is a link:

http://bit.ly/2tMrbpn

I am sorry, I don’t see any social media buttons like the ones on our demo site. Your site also doesn’t run a Sydney theme. Is there any other way for me to see your actual site?

Regards,
Kharis

The site is being built (is not live yet). Any way of advising me without seeing the site? I could make it online for a while so you can see it (just not sure when you are online).

I’ll try my best. Please take a screenshot and upload it to cloudup.com and share its link here.

Regards,
Kharis

Hi there,
I’m having the same issue here. Tried adding the custom code, but nothing changed.
Please help?
Eva

Hello Eva,

Please share a link to your site to help me suggest which code that should be working for you.

Regards,
Kharis

Here you go: http://www.genetikomm.com/

Thank you for sharing. Please try this code:

    .social-menu-widget li {
       margin-left: 8px;
       margin-right: 8px;
    } 

Regards,
Kharis

1 Like

Thanks, Kharis! Looks good now!

You’re welcome! Feel free to open a new topic if you have anything else to ask.

Regards,
Kharis