Need to center align widget in column

Hi Tony,

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

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!

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

https://anthonyrichey.com

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.

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?

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

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

• This reply was modified 7 years, 5 months ago by Heateor Support.

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

@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: https://new.blueskybridal.com/product/dominique-stella-york-5692/

@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:
https://new.blueskybridal.com/product/stella-york-5906/

@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;
}