Skip to content

Instantly share code, notes, and snippets.

Created May 1, 2012 20:37
Show Gist options
  • Save smeranda/2571173 to your computer and use it in GitHub Desktop.
Save smeranda/2571173 to your computer and use it in GitHub Desktop.
Flexible width layout for Facebook Like Box/Activity Stream to use in Responsive Designs
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;
Copy link

It works great in it self. I just seam to fight with the profile image inside the streams They really squeeze the text of the streams so the flexible width gets challenged in medium sized devices.

Do any one know if it would be possible to leave out the profile image in the stream?

Copy link

Did anyone find a solution that works for iPads (Safari / Chrome)?

Copy link

dt10111 commented Oct 8, 2013

Blerg, struggling with the same iPad issue. Fix is otherwise superb, would love to hear any recommendations for fixing iPad.

Copy link

Also having the same iPad issue... same thing happens on my Samsung Galaxy (android).

Copy link

For the iPad issue, since the properties you want to modify are inside the iframe, there is no way to achieve a fully reponsive fix because the CSS does not work cross domain.

Copy link

ghost commented Feb 18, 2014

Many thanks!

Copy link

Thank you, works perfectly

Copy link

Tezting commented Mar 5, 2014

They have now added:

id="feedback_xxxxxx" style="width: 470px;"

In the iFrame, so this solution is not enough anymore...

Copy link

Morpho commented Mar 5, 2014

Does not work anymore, just noticed the same :/
Should we open a new bug report on Facebook?

Copy link

Morpho commented Mar 5, 2014

Please subscribe here everybody who is affected:

Copy link

tnx , its very useful and easy to use.

Copy link

Thanks so much, this did the trick

Copy link

emblisha commented Sep 2, 2014

thanks soo much it works great

Copy link


Copy link

thethao commented Sep 20, 2014


Copy link

I've just resolved a similar issue using the CSS from - however full width page responsive still leaves half the page blank on a 1600px wide monitor :(

Copy link

Thanks a lot!! it works perfectly for me!

Copy link

Thanks, copy -> paste in css file and done...

Copy link

Nashu99 commented Dec 13, 2014

Thank you, works perfectly

Happy New Year 2015 Wallpapers

Copy link

ypawany commented Jan 17, 2015

Thank you so much, it's working perfectly.

Copy link

Do not work for me. Could you reiview it?
many thanks

Copy link

Thanks smeranda:

I've seen this one on but didn't find coding, Now you really help me with finding this code.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment