How to make facebook comment box width 100%?

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

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.

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).