i am using this code to put a facebook comment box to my page,
well i think i managed to solve it, i analysed the comment box and saw that the fb-comments div is containing a span with the width of 470px by default, and inside this span i found an iframe of the same width, so the solution is to change the span and iframe width on window resize using jquery like this:
$(window).resize(function(){$('.fb-comments iframe,.fb-comments span:first-child').css({'width':$('#commentboxcontainer').width()});});
so now on window resize the whole comment box is taking the container width (by other means it is 100% width).
setTimeout(function run() {
if ($('.fb-comments span:first-child, .fb-comments span iframe').length == 0)
setTimeout(run, 1000);
else
$('.fb-comments span:first-child, .fb-comments span iframe')[1].style.width = "100%";
}, 1000);
You can do this by adding CSS class in style sheet of your HTML page as:
.fb-comments, .fb-comments span, .fb-comments iframe { width: 100% !important; }
.fb_iframe_widget,
.fb_iframe_widget > span,
.fb_iframe_widget iframe {
width: 100% !important;
}
This worked for me
zeeshan your solution seems outdated and it looks like facebook updated their plugin and that broke the style.
Probably this works better for me as of now and I believe that this style will again broke when facebook update the way their plugins work.
.fb_iframe_widget,
.fb_iframe_widget span,
.fb_iframe_widget iframe[style] {width: 100% !important;}
I encourage other contributors to add the more recent solution to this question when time comes.
I try the other solutions and none works for me.
Reading the fb documentation i found that width 100% is already supported adding the attribut data-width="100%" to the tag:
<div class="fb-comments" data-width="100%" data-href="http://www.mintybolivia.com/" data-numposts="10" data-colorscheme="light"></div>
It's working right now and according to it's documentation en mobile devices this setting is set automatically.