The same question http://stackoverflow.com/questions/10862256/how-to-make-facebook-comment-box-width-100
I tried all the answers, but it doesn't work anymore. Looks like Facebook changed some stuff a little bit.
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With