Social media buttons not aligned

Hi @s2e

I’m using OS X Chrome, the Twitter and LinkedIn buttons in your footer look correctly aligned on my side. Are they misaligned on your side or are you asking how to align the Simple Social Media buttons? If it’s the latter then we’d need to see the problem in action to try resolve.

Thanks ??

Hi Mispion,

Yes, it is the misalignment of the simple social media icons under each post (and not in the footer as I had indicated). Please take a look at this page..https://s2econsulting.biz/recipe-for-sustaining-growth-from-hbr-mckinsey/

thanks!

Lots going on there. Apologies for the hassle. It’s possible the source code from G+ and LinkedIn has changed. Here is the hotfix for Appearance > Custom CSS:

/* Post Sharing */

article.post .share-buttons li, article.page .share-buttons li {
	display: inline-block;
	float: none;
	vertical-align: baseline;
}

.plusone div[style] {
	font-size: inherit !important;
}

.IN-widget[style] {
	line-height: inherit !important;
}

Mispion,

Thanks for the response. This seems to fix the alignment of G+ but not LinkedIn. It causes an issue when it is shared via LinkedIn

Take a look at simple social buttons at the bottom of this post…
https://s2econsulting.biz/6-ways-rapid-growth-can-damage-your-small-to-medium-sized-enterprise/

Please could you try temporarily de-activating Simple Social Icons and temporarily removing our previous Custom CSS.

Finally, insert this one new rule:

.linkedin[style] {
width: 101px !important;
}

Let us know how that goes.

This code – a combination of the two codes you set with a custom height for LinkedIn widget seems to get it close. Inheriting the line-height was dropping it to the bottom. There is still some issue with the alignment when displaying the shares..Would love to know if we can fix it…
https://s2econsulting.biz/6-ways-rapid-growth-can-damage-your-small-to-medium-sized-enterprise/

article.post .share-buttons li, article.page .share-buttons li {
display: inline-block;
float: none;
vertical-align: baseline;
}

.plusone div[style] {
font-size: inherit !important;
}
.IN-widget[style] {
line-height: 25px !important;
width: 105px !important;
}

Did you have a chance to try the plugin step I highlighted? We’re stuck battling something that I think might be added by a plugin. The icons we’re working with are added by Vantage but I think styles from a plugin might be targeting the same CSS class and ID’s.

Yes, I have deactivated the Simple Social Buttons plugin.

Phew, really not sure why this has happened. I’m not seeing the same behaviour in my local demo.

The LinkedIn button is adding a style block with loads of !important hacks making it really hard to override the values we need to change.

I’m still not having any luck. Sorry. Would you mind dropping me an email on [email protected] so we can discuss this further. My name is Andrew. Thanks ??

Thanks! The laptop and mobile display of the social share icons have been resolved.

Awesome ??

All the best.