WordPress.org

Support

Support » Themes and Templates » Pinboard » [Resolved] Jetpack Sharing "Official Buttons" are Overlapping

[Resolved] Jetpack Sharing "Official Buttons" are Overlapping

  • I’ve dug through the CSS to try to figure out what’s causing this or how to fix it, but I just can’t seem to find it. I’ve got the latest version of WordPress, the latest version of Jetpack, and (obviously) the Pinboard theme.

    Here’s a link to one of the posts on my site to give an example: http://www.reactiongifs.us/shut-up-and-take-my-money/

    You can see all of the share icons (FB Like, Twitter, +1, etc) right below the post. They just don’t line up well and a few overlap. Although I prefer Jetpack sharing, I’ve also tried other third party plugins and they all seem to do this. Any help or suggestions would be greatly appreciated. Thanks!

Viewing 15 replies - 1 through 15 (of 20 total)
  • Richard Archambault

    @richardmtl

    Happiness Engineer

    Hi!
    I think the problem lies here, in your css:

    .entry-tags {
    margin: -8px -8px 16px;
    }

    Change that first -8px to something like 30px instead, that should work better.

    Alas, no such luck. it seems to affect the vertical spacing below the share buttons, but the buttons themselves remain in the same position.

    WPyogi

    @wpyogi

    Forum Moderator

    Not a perfect solution, but adding the width to this CSS seems to improve it:

    div.sharedaddy .sd-content li {
        display: block;
        float: left;
        margin: 0 5px 5px 0 !important;
        width: 80px;
    }

    The google plus one is messed up because of this inline padding:

    <div class="fluid-width-video-wrapper" style="padding-top: 50%;">

    WPyogi

    @wpyogi

    Forum Moderator

    This seems to fix the last problem in the above post:

    #___plusone_0 .fluid-width-video-wrapper {
       padding-top: 0 !important;
    }

    WPyogi, what does the triple underscore do in CSS?

    WPyogi

    @wpyogi

    Forum Moderator

    No idea – ROFLMAO!

    EDIT- guessing that it’s Google’s or someone’s way of organizing selectors/other code elements? I just used Firebug and copied it into my custom CSS – like you’re always saying to do :).

    🙂

    Edit: Could be, I haven’t seen it before.
    Have you cleared your browser cache! 🙂

    WPyogi: You, [ma’am], are a scholar and a gentle[wo]man. It looks great. Thank you so much!

    Richard Archambault

    @richardmtl

    Happiness Engineer

    I’m glad you folks worked it out, it definitely looks better now.

    And just to confirm what WPyogi said, the underscores have no special meaning in CSS, it’s definitely someone’s idea of how to organize their CSS. 🙂

    WPyogi, my apologies about the gender mix-up. Regardless, my point remains: You’re awesome. Thanks again!

    Hey! I’m having a similar overlap problem. Not sure if the above CSS fix will work for my site too. Can someone lend a hand?

    Here’s one of the pages with the problem: http://thedessertstomach.com/2013/03/14/homemade-nutella/

    Thanks in advance!

    WPyogi

    @wpyogi

    Forum Moderator

    Did you try it?

    Should’ve just tried it before posting; sorry, I’m new to this.

    Just used the above two-step solution. Works great now! Thanks WPyogi.

    http://collarcitybrownstone.com

    Can someone please help me with this same problem. I tried doing the same thing above in the edit CSS screen and nothing seems to work. I am not good at all with css coding and seriously need some help. I have been dealing with this for three days now. I just switched to WordPress from Blogger and I cannot make the annoucement to my blogger subscribers until I clean up the mess on the Home page.

    Richard Archambault

    @richardmtl

    Happiness Engineer

    Hi there,

    I looked at your site, and this post in particular:

    http://collarcitybrownstone.com/2013/03/north-south-group-read-anyone.html

    Everything looks fine to me. Did you find the solution to your issue? If not, could you tell me what the exact problem you are having is?

Viewing 15 replies - 1 through 15 (of 20 total)
  • The topic ‘[Resolved] Jetpack Sharing "Official Buttons" are Overlapping’ is closed to new replies.
Skip to toolbar