How to make facebook comment box width 100% and responsive?

This is was a facebook bug, check it out here:https://developers.facebook.com/x/bugs/256568534516879/

The only available workaround is just using javascript.

Later edit: Bug fixed: You have to write: data-width="100%"

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%. https://developers.facebook.com/docs/plugins/comments

With reference to https://developers.facebook.com/support/bugs/173395380238318/

Facebook comment plugin, they keep on updating new stuff but sometimes it ends up to a new bug.

So simple CSS will resolve the width issues.

/*Fb Comments Width Fix*/.fb_iframe_widget_fluid_desktop, .fb_iframe_widget_fluid_desktop span, .fb_iframe_widget_fluid_desktop iframe {            max-width: 100% !important;            width: 100% !important; }

Note: Make sure you use !important. Without important, it will not work as excepted.

 $(".fb-comments").attr("data-width", $(".fb-comments").parent().width());        $(window).on('resize', function () {            resizeiframe();        });    function resizeiframe() {        var src = $('.fb-comments iframe').attr('src').split('width='),            width = $(".fb-comments").parent().width();        $('.fb-comments iframe').attr('src', src[0] + 'width=' + width);    }

Jquery Workaround,

Source : https://developers.facebook.com/x/bugs/256568534516879/Comment by : Milap Bhojak