How to make the Facebook Like Box responsive?

Question

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.

Answer 1

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