Search code examples
javascripthtmlsharethis

Reducing size of sharethis.com reaction buttons


I recently figured out sharethis.com offers free reaction buttons that can be embedded into any site. The size of the reaction buttons is too large. Good for blog posts but not good for discussion forums as there are too many replies/posts in each topic. I embedded the buttons into my forum. I want to reduce the size of the buttons from 45x45 to 16x16. I tried modifying CSS but unfortunately, it doesn't help. Is there anybody who can help to reduce the size of the reaction emojis? I'd really appreciate the help.

I tried looking for the support of sharethis.com. But there is no support/ticket/contact system there.

This is the code I'm using:

Javascript

    <script type="text/javascript" src="https://platform-api.sharethis.com/js/sharethis.js#property=5ed622e4c2a2080012eb58e8&product=inline-reaction-buttons" async="async"></script>`

HTML

<div class="sharethis-inline-reaction-buttons" stlye="font-size: 10px;"></div>

I tried adding CSS modifying the button's class.

.st-btn {
font-size: 16px;
line-height: 16px;
}

Also tried

.st-btn {
height: 16px;
width: 16px;
}

But it's having no effect. Any solution to this will be appreciated.

You can test it out at my website testing website in case you need to inspect the element and modifying CSS. http://tvpsite.ml/forum/index.php?topic=1


Solution

  • Just found how the size can be reduced via CSS.

    .st-btn > svg {
        height: 20px !important;
        width: 20px !important;
    }
    

    Above code does the job of changing size of a reaction emoji.