Horizontal bar mobile view not centered

Hello,

Thanks for the appreciation ??

On the mobile view, the sharing bar isn’t perfectly in the middle, but seems to be a bit to the left, causing a white space on the right.The bar on the bottom activates if the screen width is below 1.060 px (due to the theme we use).

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

@media screen and (max-width: 783px){
.heateor_sss_bottom_sharing {
    padding: 0!important;
    right: 0px!important;
    left: auto!important;
    display: block!important;
    width: auto!important;
    bottom: -10px!important;
    top: auto!important;
}
}

We will include this fix in next release.

The Pinterest button also doesn’t seem to work. Clicking it does nothing

It’s taking couple of seconds. Probably, because there are too many images to load.

How can we hide the Line.me button on the desktop view?
How can we hide Pinterest, Reddit, StumbleUpon and Email on the mobile view?

Add following CSS in Custom CSS option:

@media screen and (min-width:1060px){
.heateor_sss_line_count, .heateorSssLineBackground{
    display: none !important;
}
}
@media screen and (max-width:1060px){
.heateor_sss_line_count, .heateorSssLineBackground, .heateor_sss_pinterest_count, .heateorSssPinterestBackground, .heateor_sss_reddit_count, .heateorSssRedditBackground, .heateor_sss_stumbleupon_count, .heateorSssStumbleuponBackground, .heateor_sss_email_count, .heateorSssEmailBackground{
    display: none !important;
}
}

Thanks for the fast answer.

If we add all the code mentioned, the bottom bar is not responsive. Without the last media snippet (hiding pinterest, reddit and so on, it works).

Here is our complete code we inserted so far into custom css:

@media screen and (max-width:1060px){
.heateor_sss_pinterest_count, .heateorSssPinterestBackground, .heateor_sss_reddit_count, .heateorSssRedditBackground, .heateor_sss_stumbleupon_count, .heateorSssStumbleuponBackground, .heateor_sss_email_count, .heateorSssEmailBackground{
    display: none !important;
}
}
@media screen and (min-width:1060px){
.heateor_sss_line_count, .heateorSssLineBackground, .heateor_sss_whatsapp_count, .heateorSssWhatsappBackground{
    display: none !important;
}
}
.heateorSssSharingArrow{display:none!important}
@media screen and (min-width:1060px){
    div.heateor_sss_horizontal_sharing{
        display:none!important;
    }
}
@media screen and (max-width: 1060px){
.heateor_sss_bottom_sharing {
    padding: 0!important;
    right: 0px!important;
    left: auto!important;
    display: block!important;
    width: auto!important;
    bottom: 0px!important;
    top: auto!important;
}
}

Oh, that’s because you have hidden some icons. Add following CSS in Custom CSS option to restore the responsiveness:

@media screen and (max-width: 1060px){
div.heateor_sss_bottom_sharing li{
    width: 20% !important;
}
}

You would need to adjust width (100/total icons) in above CSS in future, if you add/remove icons from share bar.

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

Perfect, works great. Thanks a lot and have a terrific day.

Forgot to mark as resolved.

You’re welcome and have a terrific day as well ??