Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Flexible width layout for Facebook Like Box/Activity Stream to use in Responsive Designs
/*
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;
}
@mfarinelli
Copy link

mfarinelli commented May 29, 2013

mikfrench, marcosanchez and jack-fu, did you guys find a solution for that on Ipad? I'm facing the same issue right now.

@eomonteiro
Copy link

eomonteiro commented Jun 1, 2013

.fb-comments{width: 100% !important;}
.fb-comments iframe[style]{width: 100% !important;}
.fb-like-box{ min-width:280px;width: 100% !important;}
.fb-like-box iframe[style]{min-width:280px;width: 100% !important;}
.fb-comments span{width: 100% !important;}
.fb-comments iframe span[style]{width: 100% !important;}
.fb-like-box span{min-width:280px;width: 100% !important;}
.fb-like-box iframe span[style]{min-width:280px;width: 100% !important;}
.-cx-PRIVATE-pluginBoxContainer__border{ border:none}

work for me

@BKPremier
Copy link

BKPremier commented Jun 11, 2013

I used {width: 100% !important;overflow: hidden;} to make the iframe render to the parent size. However, when I decrease the viewport size on my laptop browser, the content/feed does a text-wrap with the width and drops to the next line. However, when viewing on my iphone, the text is cut off. Any idea on what could be an issue? Also, this has been working fine for me for the past month, and just yesterday I started getting an overflow error with the Like Box. Did Facebook change something within their plugins?

@ITPrism
Copy link

ITPrism commented Jun 29, 2013

I think, you should replace ".fb_iframe_widget" with ".fb-like-box" because there is a conflict with Facebook Like button. The button disappears! ;)

.fb-like-box, .fb-like-box span, .fb-like-box span iframe[style] {
width: 100% !important;
}

@timrobinson81
Copy link

timrobinson81 commented Sep 2, 2013

That worked PERFECTLY!

@grizzlylab
Copy link

grizzlylab commented Sep 4, 2013

Thank you. It is working fine in my Twitter Boostrap project.

@netromnessumsar
Copy link

netromnessumsar commented Sep 5, 2013

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?

@jannejava
Copy link

jannejava commented Sep 18, 2013

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

@dt10111
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.

@relish27
Copy link

relish27 commented Dec 17, 2013

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

@jamesxv7
Copy link

jamesxv7 commented Feb 18, 2014

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!

@afroewis
Copy link

afroewis commented Feb 20, 2014

Thank you, works perfectly

@Tezting
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...

@Morpho
Copy link

Morpho commented Mar 5, 2014

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

@Morpho
Copy link

Morpho commented Mar 5, 2014

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

@mahdavi1456
Copy link

mahdavi1456 commented Mar 26, 2014

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

@jesseshowalter
Copy link

jesseshowalter commented Apr 15, 2014

Thanks so much, this did the trick

@emblisha
Copy link

emblisha commented Sep 2, 2014

thanks soo much it works great

@urmilshah13
Copy link

urmilshah13 commented Sep 3, 2014

perfect

@thethao
Copy link

thethao commented Sep 20, 2014

thank!

@gordonbanderson
Copy link

gordonbanderson commented Oct 10, 2014

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 :(

@kennyjamell
Copy link

kennyjamell commented Oct 25, 2014

Thanks a lot!! it works perfectly for me!

@hoangthien0291
Copy link

hoangthien0291 commented Nov 7, 2014

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

@Nashu99
Copy link

Nashu99 commented Dec 13, 2014

Thank you, works perfectly

Happy New Year 2015 Wallpapers

http://happynewyear2015wallpapersimages.blogspot.in

@ypawany
Copy link

ypawany commented Jan 17, 2015

Thank you so much, it's working perfectly.

@saosangmo
Copy link

saosangmo commented Sep 9, 2015

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

@JillianKay
Copy link

JillianKay commented Dec 20, 2015

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.

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