How to make the Facebook Like Box responsive?
NOTE: this answer is obsolete. See the community wiki answer below for an up-to-date solution.
I found this Gist today and it works perfectly: https://gist.github.com/2571173
(Many thanks to https://gist.github.com/smeranda)
/*
Make the Facebook Like box responsive (fluid width)
https://developers.facebook.com/docs/reference/plugins/like-box/
*/
/*
This element holds injected scripts inside iframes that in
some cases may stretch layouts. So, we're just hiding it.
*/
#fb-root {
display: none;
}
/* To fill the container and nothing else */
.fb_iframe_widget, .fb_iframe_widget span, .fb_iframe_widget span iframe[style] {
width: 100% !important;
}
Colin's example for me clashed with the like button. So I adapted it to only target the Like Box.
.fb-like-box, .fb-like-box span, .fb-like-box span iframe[style] { width: 100% !important; }
Tested in most modern browsers.