Flexible width layout for Facebook Like Box/Activity Stream to use in Responsive Designs

facebook_like-box_responsive.css

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

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

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.

Many thanks!

Thank you, works perfectly

They have now added:

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

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

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

Please subscribe here everybody who is affected: https://developers.facebook.com/x/bugs/256568534516879/

Hi,
tnx , its very useful and easy to use.

Thanks so much, this did the trick

thanks soo much it works great

perfect

thank!

I've just resolved a similar issue using the CSS from http://stackoverflow.com/questions/24712583/make-a-facebook-like-box-responsive - however full width page responsive still leaves half the page blank on a 1600px wide monitor :(

Thanks a lot!! it works perfectly for me!

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

Thank you, works perfectly

Happy New Year 2015 Wallpapers

http://happynewyear2015wallpapersimages.blogspot.in

Thank you so much, it's working perfectly.

Do not work for me. Could you reiview it?
http://huongnghiepnhatban.com
many thanks

Thanks smeranda:

I've seen this one on http://www.urgentfiles.com/ but didn't find coding, Now you really help me with finding this code.