After upgrading to JetPack 3.0 you may find that the Social Sharing icons no longer line up next to each other. They work well out of the box in TwentyThirteen and TwentyFourteen – but not in P2. Here’s how we can fix the problem:

First let me show you what we’re actually fixing here. In JetPack 2.9.3 and before the social sharing icons at the bottom of a post looked like this:

Screen Shot 2014-05-21 at 18.04.23

After you upgrade to JetPack 3.0, and if you’re running P2, then those icons are stacked up like this:

Screen Shot 2014-05-21 at 18.06.49

Not what we want, and not how it’s meant to be. What we really want is something like this – new icons, but in the same row as before:

Screen Shot 2014-05-21 at 18.09.06

And here’s how we can make this happen – with a hint of CSS:

/* fix JetPack 3.0 Sharing Icons */
.sd-content ul li {
    float: left;
}

I’ve noticed this issue with P2 1.5.3. Add the above code to the bottom of your theme’s style.css file, or add it to the “Edit CSS” box (under Appearance). I’ve already posted this solution over on my main site and have also mentioned it in the P2 forum to let the team know.

It’s not a perfect solution, but certainly a compromise for the interim.

Hope this helps 😉

Advertisements