On my blog, I am using a floating social media bar. It is working fine but on mobile and tablets, it is covering the page content. I want to hide this bar for responsive themes.
This is what I tried but it did not work:
@media (max-width: 850px) {
.addthis_toolbox .addthis_floating_style .addthis_counter_style {display: none;float: none;}
}
<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_floating_style addthis_counter_style" style="left:20px;top:210px;">
<a class="addthis_button_facebook_like" fb:like:layout="box_count"></a>
<a class="addthis_button_google_plusone" g:plusone:size="tall"></a>
<a class="addthis_button_tweet" tw:count="vertical"></a>
<a class="addthis_button_linkedin_counter" li:counter="top"></a>
<a class="addthis_counter"></a>
</div>
<script type="text/javascript">var addthis_config = {"data_track_addressbar":true};</script>
<script src='//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-539f52e94cc5e025' type='text/javascript'/>
<!-- AddThis Button END --></script>
You're selecting the wrong element.
Try this:
@media (max-width: 850px) {
.addthis_toolbox.addthis_floating_style.addthis_counter_style {display: none;float: none;}
}