Facebook Makes Comments Box Responsive

Finally, Facebook has made its comments box responsive. You may specify its width to 100% to get a fluid layout for a responsive site.

Facebook responsive comments box

Developer support engineer Ibrahim Faour announced Thursday, May 15, that Facebook has pushed a fix for the problem on fixed width which occured back in March 2014.

The comments plugin documentation for the setting was also updated. The instruction for changing the width now reads:

The width of the plugin. Either a pixel value or the literal 100% for fluid width. The mobile version of the Comments plugin ignores the width parameter, and instead has a fluid width of 100%.

Edit your template to implement this. Here's how:

First, find and remove or delete this code;

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

And then change the data-width value to 100%.

<div class="fb-comments" data-href="http://example.com/comments" data-width="100%" data-numposts="5" data-colorscheme="light"></div>

Save your template and you're done.