How to get multiple Facebook Like buttons to show and hide in responsive layout

410 views Asked by At

In my design I'm moving the Like button to the footer at small screen sizes. In Chrome this works dandy by having multiple calls to the widget. In other browsers, the visible Like button hides properly, but the other one doesn't load on resize.

http://jsfiddle.net/isherwood/kc3r2

@media (max-width: 400px) {
    #header .fb-like {display: none;}
    #footer .fb-like {display: block;}
}

<div id="header">
    <div class="fb-like" data-href="https://developers.facebook.com/docs/plugins/" data-layout="button_count" data-action="like" data-show-faces="true" data-share="true"></div>
</div>
<div id="footer">
    <div class="fb-like" data-href="https://developers.facebook.com/docs/plugins/" data-layout="button_count" data-action="like" data-show-faces="true" data-share="true"></div>
</div>
1

There are 1 answers

3
Jarno On BEST ANSWER

Try using visiblity instead of display:

#footer .fb-like { visibility:hidden; }

@media (max-width: 400px) {
    #header .fb-like { visibility:hidden; }
    #footer .fb-like { visibility:visible; }
}