/* | |
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; | |
} |
This comment has been minimized.
This comment has been minimized.
Nothing specific of which I'm aware. Make sure the parent element is setup with a width. |
This comment has been minimized.
This comment has been minimized.
So I'm using this in a wordpress text widget. What should I wrap the facebook code in? Does it need an id or class? Just not quite sure I understand how to use it. |
This comment has been minimized.
This comment has been minimized.
Thanks, duder. This is a very clean and simple solution to a problem that a lot of people tend to resort to unnecessary javascript to circumvent. |
This comment has been minimized.
This comment has been minimized.
Thanks so much for this - a real timesaver :) |
This comment has been minimized.
This comment has been minimized.
Just found this - works perfectly. Thank you very much :) |
This comment has been minimized.
This comment has been minimized.
Hi there, I'm using this and it's working great on every browser I've tested. The only time I'm having a problem is when I switch to an iPad. any idea what might be causing the problem on an iPad? The page in question is http://www.prwebster.com/nsfarms/why/ Thanks so much. |
This comment has been minimized.
This comment has been minimized.
I am having trouble in setting up facebook like box for my mobile, camera, laptop price comparison website http://www.prodsea.com ... can anybody please help me on this |
This comment has been minimized.
This comment has been minimized.
Hi, I have the same situation as mikfrench. I tried the gist on this site: http://www.edutec2013.ac.cr and works on most browsers. Works fine on: Galaxy S3 with Chrome, Firefox and default browser; Nexus 7 with Chrome and Firefox. On iPad mini and iPad 2 Safari and Chrome, the Facebook like box resizes bigger when finishes loading. And in Opera Mini on iPad 2 it is bigger, but is cuted. I hope this information could help someone. |
This comment has been minimized.
This comment has been minimized.
tnks for tip... |
This comment has been minimized.
This comment has been minimized.
Perfect! Thx so much for this! :-) |
This comment has been minimized.
This comment has been minimized.
To mikfrench and marcosanchez I'm having the same problem with Ipod, where FB renders bigger but only in portrait mode. In landscape mode it's 100%. Could it be that it's seeing the landscape mode (480px) as the width of the browser and rendering it that way even in portrait mode? When I put an "@media (max-width: 480px)" CSS style, I can control it on Ipod and have it rendered smaller. But still can't render it 100% on both landscape and portrait. Hope that helps, if anyone has a solution, please let me know. Thanks. |
This comment has been minimized.
This comment has been minimized.
Works like a charm for me but I haven't tested on iDevices yet. Thanks for this. I wish Facebook would make something that works out-of-box for responsive needs. |
This comment has been minimized.
This comment has been minimized.
mikfrench, marcosanchez and jack-fu, did you guys find a solution for that on Ipad? I'm facing the same issue right now. |
This comment has been minimized.
This comment has been minimized.
.fb-comments{width: 100% !important;} work for me |
This comment has been minimized.
This comment has been minimized.
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? |
This comment has been minimized.
This comment has been minimized.
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] { |
This comment has been minimized.
This comment has been minimized.
That worked PERFECTLY! |
This comment has been minimized.
This comment has been minimized.
Thank you. It is working fine in my Twitter Boostrap project. |
This comment has been minimized.
This comment has been minimized.
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? |
This comment has been minimized.
This comment has been minimized.
Did anyone find a solution that works for iPads (Safari / Chrome)? |
This comment has been minimized.
This comment has been minimized.
Blerg, struggling with the same iPad issue. Fix is otherwise superb, would love to hear any recommendations for fixing iPad. |
This comment has been minimized.
This comment has been minimized.
Also having the same iPad issue... same thing happens on my Samsung Galaxy (android). |
This comment has been minimized.
This comment has been minimized.
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. |
This comment has been minimized.
This comment has been minimized.
Many thanks! |
This comment has been minimized.
This comment has been minimized.
Thank you, works perfectly |
This comment has been minimized.
This comment has been minimized.
They have now added: id="feedback_xxxxxx" style="width: 470px;"
In the iFrame, so this solution is not enough anymore... |
This comment has been minimized.
This comment has been minimized.
Does not work anymore, just noticed the same :/ |
This comment has been minimized.
This comment has been minimized.
Please subscribe here everybody who is affected: https://developers.facebook.com/x/bugs/256568534516879/ |
This comment has been minimized.
This comment has been minimized.
Hi, |
This comment has been minimized.
This comment has been minimized.
Thanks so much, this did the trick |
This comment has been minimized.
This comment has been minimized.
thanks soo much it works great |
This comment has been minimized.
This comment has been minimized.
perfect |
This comment has been minimized.
This comment has been minimized.
thank! |
This comment has been minimized.
This comment has been minimized.
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 :( |
This comment has been minimized.
This comment has been minimized.
Thanks a lot!! it works perfectly for me! |
This comment has been minimized.
This comment has been minimized.
Thanks, copy -> paste in css file and done... |
This comment has been minimized.
This comment has been minimized.
Thank you, works perfectly Happy New Year 2015 Wallpapers |
This comment has been minimized.
This comment has been minimized.
Thank you so much, it's working perfectly. |
This comment has been minimized.
This comment has been minimized.
Do not work for me. Could you reiview it? |
This comment has been minimized.
This comment has been minimized.
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. |
This comment has been minimized.
I'm having trouble getting this to work. What settings should we be using when getting the code from developers.facebook.com?
Thanks