How to make Facebook comments widget a fluid width?

Question

Is it possible to make Facebook\'s comments widget a fluid width? Their documentation shows a width field for the fb:comments xfbml or iframe which is specifie

Answer 1

Alan your solution was working however it looks like facebook updated their plugin and broke the style. I got it working again using the universal selector:

.fb-comments, .fb-comments * {
    width:100% !important;
}

Answer 2

After grappling with this for quite some time I found a tidbit that should help you to figure out which of the CSS tricks on this page will help for your particular site/version/year of facebook's comment plugin. Look at your site in a browser and inspect the elements around the facebook comment plugin. You should find a snippet that you added and is now embellished by facebook's javascript widget that looks something like this:

<fb:comments href="http://mywebpage.com" 
    fb-xfbml-state="rendered" class="fb_iframe_widget">

take note of the part that says:

class="<whatever class your version is using>"

this is the class you want to use - so in my example above, you would want to add the following styles:

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

Answer 3

This problem has been addressed by Facebook. You can now add data-width="100%" or set the width option to100% and delete any crazy js hacks as appropriate!

Answer 4

I can't comment yet because my reputations not yet high enough, however there is a solution to this as of Dec 21, 2014

for this to work in CSS:

.fb_iframe_widget,
.fb_iframe_widget span,
.fb_iframe_widget iframe[style]  {width: 100% !important;}

you MUST have the data-width="" section set to 100% within the FB plugin code i.e

<div class="fb-comments" data-href="your site here" data-width="100%" data-numposts="5" data-colorscheme="light"></div>

working example with fluid motion: http:www.unitedbiker.org

Hope this helps everyone out, the idea is to override the iframe style to be 100% of the parent element, and to set the actual FB plugin to 100% of the iframe. This was my work around.

Answer 5

If your Facebook Comments Plugin's code looks like (XFBML):

<fb:comments href="{URL_HERE}" numposts="5" colorscheme="light"></fb:comments>

Then the following CSS should get the job done:

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

Answer 6

I think this will work for everyone. Works for me Dec 26, 2013 at http://eddie11.com/dj-eddie-talks/

#fbSEOComments, 
#fbSEOComments span,
#fbSEOComments div,
#fbSEOComments iframe,
#fbSEOComments iframe[style],
#fbSEOComments .fb_iframe_widget,
#fbSEOComments .fb_iframe_widget span,
#fbSEOComments .fb_iframe_widget iframe
{
    width: 100% !important;
}

None of the below worked for me but I left it there anyway.

.fb-comments,
.fb-comments *,
.fb-comments iframe[style],
.fb_iframe_widget,
.fb_iframe_widget span,
.fb_iframe_widget iframe,
.fb_iframe_widget iframe[style],
.fb-comments span,
.fb-comments iframe,