Responsive facebook comment box

facebook-comments, fluid-layout, responsive-design

Solution

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.

Problem

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

Original source