WordPress.org

Ready to get started?Download WordPress

Forums

Pinboard
[resolved] Jetpack Sharing "Official Buttons" are Overlapping (21 posts)

  1. Evan
    Member
    Posted 1 year 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: 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!

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

  3. Evan
    Member
    Posted 1 year ago #

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

  4. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    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%;">
  5. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

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

    #___plusone_0 .fluid-width-video-wrapper {
       padding-top: 0 !important;
    }
  6. Andrew
    Forum Moderator
    Posted 1 year ago #

    WPyogi, what does the triple underscore do in CSS?

  7. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

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

  8. Andrew
    Forum Moderator
    Posted 1 year ago #

    :)

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

  9. Evan
    Member
    Posted 1 year ago #

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

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

  11. Evan
    Member
    Posted 1 year ago #

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

  12. AFogel
    Member
    Posted 1 year ago #

    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!

  13. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    Did you try it?

  14. AFogel
    Member
    Posted 1 year ago #

    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.

  15. Collar City Brownstone
    Member
    Posted 1 year ago #

    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.

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

  17. Collar City Brownstone
    Member
    Posted 1 year ago #

    OOps, I was posting my issue on the wrong thread. I started another one detailing issues with overlapping on the home page. Can you please help me out over there?

    Thank you

  18. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    @Collar City Brownstone - please do not post duplicate threads - your problem is not related to JetPack.

  19. Tony Locke
    Member
    Posted 11 months ago #

    So, if I use a different Theme, then how do I know which file to edit. I want to take advantage of your helpfulness and insights, but I don't know how to make it happen.

    I am pasting in below the files that are listed in my Theme. I copied the text out of all the css files and searched the files for the key words you suggested, but never found them.

    Would you help me too?

    [long list of irrelevant files removed]

  20. WPyogi
    Volunteer Moderator
    Posted 11 months ago #

    @Tony Locke - please start your own thread per the forum guidelines - your issue is not the same and this thread is marked resolved.

    Also, for CSS help, you MUST post a link to your site (code or files doesn't show anything useful).

  21. Tony Locke
    Member
    Posted 11 months ago #

    So sorry . . . and thanks!

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic