AddThis Sharing – Fix Counter Bubble Cut Off

AddThis is a popular social media sharing tool. But if you’re using this tool on a WordPress theme that uses the border-box sizing model, you will notice that the right side of the counter bubble is cut off.

The entire image is not shown because AddThis’s CSS instructs the container of the image to use a specific width in pixels. This pixel value will be handled differently for the two box-sizing models: content-box and border-box.

AddThiss Button CSS
The counter bubble on the top image is cut off.

A lot of WordPress themes use the border-box sizing model. A good example is the TwentyThirteen theme, the official theme currently bundled with WordPress. The fix is to ensure that AddThis elements don’t inherit the border-box model by adding the code below in your custom CSS. I’ve already suggested this on the plugin’s support page and an author has agreed to add the fix but as of the latest version has not been implemented yet.

.addthis_toolbox * {
     -webkit-box-sizing: content-box;
     -moz-box-sizing:    content-box;
     box-sizing:         content-box;
}

This code instructs all elements under the AddThis toolbox div to use the content-box sizing model. This makes the AddThis display uniformly on both box-sizing models.

Update :
For WordPress themes, setting the box-sizing model to the html element then setting all other to inherit proves to be a better approach. Though plugins like AddThis should still anticipate various box-sizing models when applying CSS.

Leave a Reply

Please write your comments in english. I delete anything that even remotely resembles spam.

Note: When posting code, enclose it in pre and code tags.
e.g. <pre><code> Add code here </code></pre>