[css] How to make the Facebook Like Box responsive?

I am using the Facebook like box code in my side bar by pasting the Facebook code into a text widget. My theme is responsive, and I'd like to get the like box to resize correctly. I found this tutorial but he says the way he is doing it, isn't "fully responsive" so I didn't know if there was a better way to do it.

This question is related to css widget responsive-design

The answer is

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)

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;

Similar questions with css tag:

Similar questions with widget tag:

Similar questions with responsive-design tag: