Support » Plugin: WordPress Social Sharing Plugin - Sassy Social Share » How to center Sassy Social Share widget

  • Resolved kennethgroning

    (@kennethgroning)


    Hi

    Great plugin but how can you properly center align the widget?
    When setting up the plugin standard interface, and choosing “Horizontal alignment center”, the so-me icons show up off center to the right on the web-pages.

    Hope it can be fixed.

    Best regards, Kenneth

    The page I need help with: [log in to see the link]

Viewing 11 replies - 1 through 11 (of 11 total)
  • Plugin Author Heateor Support

    (@heateor)

    Hi Kenneth,

    Try this. Keep the Horizontal Alignment to left and add following CSS in the Custom CSS option in Miscellaneous section at plugin options page:
    div.heateor_sss_horizontal_sharing ul.heateor_sss_sharing_ul{left: 38%;}

    kennethgroning

    (@kennethgroning)

    Hi Heateor,

    Thanks, but the css doesn’t seem to change the position (I copy-pasted from your post)
    Can you take a look at it again?
    I appreciate your help with this!

    Plugin Author Heateor Support

    (@heateor)

    Sorry. My bad. Replace previous CSS with the following:
    div.heateor_sss_horizontal_sharing ul.heateor_sss_sharing_ul{left:38%;position:relative;}

    kennethgroning

    (@kennethgroning)

    Yes that is much better – it works fine on laptop and desktop but it is still off center on mobile.. can this also be fixed? Thanks!

    Plugin Author Heateor Support

    (@heateor)

    Replace previous CSS with following:
    ul.heateor_sss_sharing_ul{width:234px;margin:0 auto!important;}
    Please note that you would need to increase the width in above CSS if you add more icons in social share widget and decrease it if you exclude icons.

    kennethgroning

    (@kennethgroning)

    Thanks, but that doesn’t work – the icons go back to being left aligned. That goes for both desktop/laptop and mobile. I tried decreasing and increasing the pixel width in the script, but only difference was the icons started getting stacked with the decrease.

    Plugin Author Heateor Support

    (@heateor)

    Oh. Try using !important for the width. Replace previous CSS with following:
    ul.heateor_sss_sharing_ul{width:234px!important;margin:0 auto!important;}

    kennethgroning

    (@kennethgroning)

    Okay, on mobile (vertical) it’s almost center aligned, but if you turn the mobile to horizontal the icons aligns to the left again. On desktop/laptop the icons stay left aligned, not centered at all…

    kennethgroning

    (@kennethgroning)

    So I reached out to the nice people at SiteOrigin and asked for their help. The site is build with one of their themes. Alex from their support provided this script:

    ul.heateor_sss_sharing_ul {
    width: 100%;
    text-align: center;
    }

    ul.heateor_sss_sharing_ul li {
    float: none !important;
    display: inline-block;
    }

    And it did the trick! Oh, and in the settings of the Sassy plugin you have to choose left alignment.

    Plugin Author Heateor Support

    (@heateor)

    Okay. Great, will incorporate it in the code of the plugin.

    Plugin Author Heateor Support

    (@heateor)

    Improved center alignment of standard share icons in version 3.2.13 of plugin.

Viewing 11 replies - 1 through 11 (of 11 total)
  • You must be logged in to reply to this topic.