CODEWITHSUNDEEP
cssfacebookresponsive-designfacebook-likebox
isherwood
isherwood

Reputation: 61083

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

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>

Upvotes: 1

Views: 389

Answers (1)

Jarno
Jarno

Reputation: 653

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; }
}

Upvotes: 1

Related Questions