Responsive facebook comment box

Question

I've been researching several different ways to force a facebook comment box plug-in to be fluid/responsive/liquid/whatever-we-call-it (just showing the stupidity of names), and all of them work fine. But also, all of them make the plug-in disappear when accessing from Google Chrome.

I'm using this:

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

Which has the same results (apparently) as:

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

Question: How can I fix this strange behavior? (Why does it happen?)

Thanks for your time. Wether you do help me or not, have a nice to-day! :)

Answer 1

this worked for me: Add to the fb-comments div data-width="100%"

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

and it will be responsive when you resize the browser.

you can put the fb-comments div inside another div and give that div the width you want.

Answer 2

This is facebook comment part-

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

Just add this CSS bellow the div-

<style>.fb_iframe_widget span[style]{width:100% !important;}</style>

Answer 3

Just Insert data-width="100%" in the div

<div class="fb-comments"  data-width="100%"></div>

Answer 4

You could use data-mobile atribute

<div class="fb-comments" data-href="http://example.com/comments" data-numposts="5" data-mobile="true"></div>