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! :)

Malinger

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.

Centrifuge

This will definitely work as stated in Facebook Documentation: data-width: 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%. developers.facebook.com/docs/plugins/comments#settings – Carton

@Ja8zyjits now it is ;) - By the time it was asked, data-width was not available. Thanks! – Flooring

Answer 2

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

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

Learn

Answer 3

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>

Sennar

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>

Kal