Responsive Facebook Comments CSS Hack Broken

Question

I was using:

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

To make Facebook Comments responsi

Answer 1

I got bit by this too. I put in a JS hack. Basically bind to the resize event of the window and redraw the comments widget when it fires (uses jquery if you want I can post without):

$(window).resize(function(){
 $(".fb-comments").attr("data-width", $(".comments").width());
 FB.XFBML.parse($(".comments")[0]);
});

In the example above .comments is the container that you want the width of the fb-comments to expand to. The downside of this is that when the window is resized the comments widget is reinitialized.

If you use underscore wrap the resize handler using debounce to keep it from firing to often.