Saturday, July 4, 2015

How to Make AddThis Responsive


The responsive craze has pretty much reached its peak, and has plateaued. Albeit, it’s plateaued quite high where many people are downright obsessed with making every aspect of their website completely responsive.
The problem is someone will pick up an all responsive WordPress theme for example and they’ll add all sorts of widgets and plugins to it, often times 3rd party add-ons are not responsive. As most people are not web designers/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 3rd 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.
A lot of companies haven’t jumped on the bandwagon 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. But, with a little extra work, we can accommodate in order to integrate our favorite tools into our responsive design.

Your Most Common AddThis Embed

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){.at300b, .addthis_counter{clear:both !important}}

Demo

https://startupwp.com/giveaways/ – See the share icons near the bottom of the page. Squeeze/resize the page horizontally until the icons stack.
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 nicer, but simple is good enough for me.
Thanks for reading, Bryan