Jetpack Sharing "Official Buttons" are Overlapping

  • Resolved Evan

    (@phooey)


    12 years ago

    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: https://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)

  • 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.

    Thread Starter Evan

    (@phooey)

    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)

    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)

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

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

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    WPyogi, what does the triple underscore do in CSS?

    WPyogi

    (@wpyogi)

    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 :).

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    ??

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

    Thread Starter Evan

    (@phooey)

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

    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. ??

    Thread Starter Evan

    (@phooey)

    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: https://thedessertstomach.com/2013/03/14/homemade-nutella/

    Thanks in advance!

    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.

    https://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.

    Hi there,

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

    https://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 ‘Jetpack Sharing "Official Buttons" are Overlapping’ is closed to new replies.