Social Media Icons - Spacing

jerryr

hi - I am stumped ! :dunno

How do you shorten (or remove) the spacing between the social media icons ?
Example (I just picking a site)
http://www.joffoto.com/
If I want to shorten (or remove0 the spacing between the Facebook, Instragram and custom link social icons in the footer, is there css to do so ?

thanks

- jerryr

photoclick

I'd use margin or padding to control the distance. Of course it all depends on the actual page you are working with - feel free to provide a link However I am stumped - you are advertising web design and customization for customers on your web site and you are askign this kind of question? :)

leftquark

You should be able to modify this:

.sm-page-widget-social-links.sm-social-links-medium.sm-social-links-horizontal li {
    padding-right: 18px;
}

jerryr

Thanks Aaron for the suggestion. I went into the CSS for each button and adjusted the margin accordingly.
I have see posts / questions regarding the social media icons.
The trick I use :
- Create the button (40px by 40px) or a size close to that
- Upload to your SmugMug site (of course)
- Change the social media settings to Icon Size Medium; Type Default Icons; Color Branded

To change (for example) the Link Icon :

.sm-page-widget-social-links-link .sm-official .sm-fonticon
{
background-image: url("###");
height: 40px;
width: 40px;
background-repeat: no-repeat;
background-position: top center;
color: transparent;
padding-right: -5px !important;
margin-right: -5px !important;
}

.sm-fonticon-LinkSquare:before {
display: none;
}

sm-fonticon-Link:before {
display: none;
}


.sm-user-ui .sm-page-widget-social-links-link .sm-official .sm-fonticon:before {
display: none;
}


### is the URL of your button
Adjust the padding and margin right accordingly to move the icons closer

Examples of customized icons :
http://www.jakigoodmiller.com/Seniors/Home
https://joeurbz.smugmug.com
http://oni-studio.smugmug.com/
http://www.harlanbudowski.com/

leftquark

That works! Thanks for sharing the code!