Support » Plugin: Social Sharing Plugin - Sassy Social Share » Need to center align widget in column

  • Resolved richeyt

    (@richeyt)


    I need to align the Sassy Social Share widget in a column. I can use padding in the shortcode, but I prefer to have it center aligned particularly for mobile devices. Otherwise it looks unprofessional. I could not see a way in the user interface to do that. When I put in the shortcode: [Sassy_Social_Share align=center] or anything like that, it has no effect. I saw that alignment only works with the floating interface, but I don’t want the floating interface. I just want it to show up centered in the column. Is that possible? Thanks!
    Tony

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

    (@heateor)

    Hi Tony,

    You can try Horizontal alignment option from Standard Interface section at plugin options page in admin area.

    Thread Starter richeyt

    (@richeyt)

    I can’t believe I missed that, as it was precisely what I was looking for. However, it doesn’t seem to work properly. When I insert the widget in the block, the default is left-aligned, and that’s how it looks. When I set it to “Center” in the plugin admin area, it goes right-aligned, and actually the far end of the four icons I have shown is off the right side of the page. When I set the widget for right-aligned, it goes back to the far left of the block. I’ve resized the block to large and extra large and can tell you that in the “Center” position, what’s happening is that the first icon (in my case, Facebook) is perfectly centered in the block, with all the other icons following to its right. What I need is the entire group of icons centered in the block. Here’s a link to a screen shot of this. Any ideas? Thanks!
    Widget Alignment Screen Shots

    Plugin Author Heateor Support

    (@heateor)

    We need the webpage url where you have enabled widget so that we can check what’s wrong.

    Thread Starter richeyt

    (@richeyt)

    Plugin Author Heateor Support

    (@heateor)

    You can try adding following CSS in Custom CSS option at plugin options page in admin area:

    div.widget_heateor_sss_sharing ul.heateor_sss_sharing_ul{
        width: 157px !important;
        margin: 0 auto !important;
    }

    You would be required to adjust width in above CSS, if you include/exclude icons from the widget in future.

    Thread Starter richeyt

    (@richeyt)

    Thank you. That worked. Is there any way to get the drop-down choice in the user interface to work so no further changes are required?

    Plugin Author Heateor Support

    (@heateor)

    For now, you need to use the custom css, we posted above, to make it work. In future, we will improve our plugin so that you don’t need to use any custom code.

    Hi there, I have this exact same problem where the widget won’t center properly (as above, the left-most icon is what ends up getting centered, not the entire widget) but using the custom CSS above didn’t work. I have tried it both within a table and using the full width of the page. I am not an expert at CSS so I a bit confused about implementation.

    You’ll find it at the bottom of this page:
    https://www.heyorca.com/blog/client-management/client-onboarding-guide/

    Cheers,

    Jay

    Plugin Author Heateor Support

    (@heateor)

    @jeowulf
    Hi Jay,

    Place following CSS in Custom CSS option in Miscellaneous section at plugin options page in admin area:

    div.et_pb_section ul.heateor_sss_sharing_ul{
        width: 158px;
        margin: 0 auto !important;
    }

    You would be required to increase, decrease the width in above CSS, if you include , exclude the social networks from social share widget, respectively.

    That works, thanks! Just for anyone else reading, you need to implement that CSS and set the alignment in the widget settings back to “left.”

    Plugin Author Heateor Support

    (@heateor)

    @jeowulf,
    You’re welcome 🙂

    I’m having the same issue with centering my icons. Tried all above plus additional css – the icons move, and I can get the icons to center in desktop but in mobile they are still wonky. I simply need to center the icons on mobile and desktop.

    Please help.

    Here is the page it’s on: http://new.blueskybridal.com/product/dominique-stella-york-5692/

    Plugin Author Heateor Support

    (@heateor)

    @clindebak,
    The webpage you have mentioned, doesn’t exist. Can you post a link where you want to center align the icons?

    Sorry about that! Here’s an active link:
    http://new.blueskybridal.com/product/stella-york-5906/

    Plugin Author Heateor Support

    (@heateor)

    @clindebak
    Keep the widget alignment Left and add following CSS in Custom CSS option in Miscellaneous section at plugin options page:

    ul.heateor_sss_sharing_ul{
        width: 128px !important;
        margin: 0 auto !important;
    }
Viewing 15 replies - 1 through 15 (of 26 total)
  • The topic ‘Need to center align widget in column’ is closed to new replies.