Jetpack sharing buttons not aligned – how to repair?

The problem is CSS and the use of iframes for Facebook and Twitter buttons, and possibly a theme conflict as well

iframes are swines to style (position) properly with css, so the suggestions here MAY NOT help. (Why Jetpack devs decided to use the iframe buttons is beyond me)

It’s impossible to suggest exact mods for your site without access, or a duplicate theme and settings on a test site, but you can start here;

You’ll need to do some mods to CSS, either the Jetpack file plugins/jetpack/modules/sharedaddy/sharing.css or in your theme custom.css file (If you mod the jetpack stylesheet – make a copy first)

Try this first
Open the jetpack sharing.css file and scroll down to find the class (line 117)

div.sharedaddy .sd-content {
	width: 82.125%; /* 530px / 640px */
	float: right;
	margin: -2px 0 0 0;

Add !important to the margin style
margin: -2px 0 0 0!important;

Then mod the next style the same way

div.sharedaddy .sd-content ul {
	margin: 0;

IF THAT DOESN’T WORK TRY THE NEXT, LONGER OPTION – You may need to use different margin-top values for the facebook/twitter buttons to the other buttons

e.g. li.share-facebook a.sd-button

Mod 1: (line 273)

li.share-facebook a.sd-button > span {
	background-image: url('images/facebook.png');

ADD: margin-top:5px!important;
OR: padding-top:5px!important;

under the background-image line

Add the same code as suggested above

NOTE – 5px is just a suggestion – play around with the values
Try margin and padding – sometimes one will work, the other will not – Depends on theme/jetpack combination.

THEN – do the same for each class for every button you use.

This is for latest Jetpack version 2.4

If you decide to use the custom style file, you’ll need to add the classes as well – easiest is copy the entire class to the custom stylesheet with the added code…

It’s a lot of bother, and as I said, these simple mods may not work with the iframes – maybe switch to the square image type buttons instead. They will probably work OK without modding anything, and if needed, are easier to style as they don’t use iframes,

Try this first
Open the jetpack sharing.css file and scroll down to find the class (line 117)

That’s not really a good idea and you will lose your edits if an update is releases.

If it’s just a CSS issue then try using a custom CSS plugin to add that !important to those CSS elements.

thanks much. I really appreciate your efforts in heping me.

is there any way to find out the root cause?
I have the same plugin in antoher blog/theme and it works fine, however in this newwly created blog with a brand new theme it’s not showing well.

If not… then I will really try those options

@jan Dembowski
Good Advice!

Hi all, I have tried with editing the jetpack css as well as repeating the CSS in the custom css plugin adding the !important.
But it doesn’t help.

I have tried different values for margin and padding, top and bottom, I have tried + and – values (eg. -10px), but nothing :/

Any other idea?

You have this rule in your CSS:

iframe {
margin: 10px 0 15px;
}

If you remove that rule, everything lines up properly. I suggest you remove that rule, or, if it’s intended to affect another iframe elsewhere on your site, then you should change the CSS to make it more specific to the particular iframe that needs it, rather than targeting all iframes.

Hello, the following made it work:

.sharedaddy iframe {
	margin: 0;
}

However, there is still the “email” button a little below.
Anybody has a clue what CSS can correct it?

Try this:

.sharedaddy ul {
line-height: 0;
}

Thank you. It works. I hope it helps also other people.

Thanks again :)))