The problem I often see is that someone will pick up an all-responsive website template or WordPress theme for example and they’ll add all sorts of widgets and plugins to it, and more times than not, third-party add-ons are not responsive. As most people are not web designers or programmers, they tend to not think of it in the correct terms. If something is not responsive their immediate response is often:
“What the heck? I thought this theme was suppose to be responsive, then why does [insert third-party name here] look bad on small screens?”
Essentially blaming the theme as if it’s broken or that the claim that it was responsive was somehow misleading. This is just silly, but comes up over and over again.
The real root issue is that a lot of companies simply haven’t jumped on the responsive craze bandwagon yet, for any number of reasons. Perhaps they don’t care, don’t know how to make their works responsive, or specifically choose not to make their works responsive because they feel it’s not a good thing philosophically.
In the case of AddThis, it appears they reserve responsiveness as a pro feature. But, with a little extra work, we can accommodate in order to integrate our favorite tools into our responsive design.
Your Typical AddThis Embed
To Demo — If not on a mobile device, squeeze the browser window narrower until the share icons stack.
Code
<div class="addthis_toolbox addthis_default_style" id="addthis"><a class="addthis_button_facebook_like" fb:like:layout="button_count"></a><a class="addthis_button_tweet"></a><a class="addthis_button_google_plusone" g:plusone:size="medium"></a><a class="addthis_counter addthis_pill_style"></a></div>
<script type="text/javascript" src="https://s7.addthis.com/js/250/addthis_widget.js"></script>Add the Following to Your Stylesheet to Make it Responsive
#addthis{max-width:100% !important}
@media all and (max-width:480px){.addthis_toolbox a, .addthis_toolbox .addthis_counter{display:block !important;float:none !important;clear:both !important}}That’s it. This is of course a very basic example and there’s all sorts of extra little things you can do to make it look nicer, but simple is good enough for me.