Is it possible to set a fluid width for Facebook's social plugins?

facebook-social-plugins responsive-design
Chaddeus picture Chaddeus · Jun 28, 2011 · Viewed 94.4k times · Source

I'm developing a site around the "responsive design" concept, but the facebook social plugins are static width and "break" the layout when it's re-sized.

Using media queries, I've set the plugins to hide on low-res browsers (mobile, etc...). However, on desktop browsers, when the browser window is re-sized smaller, but not so small to hide the plugins, they break out of the layout.

Any way to set a fluid width for the Facebook social plugins?

Answer

Jubair picture Jubair · Apr 21, 2012

none of these methods worked but using this idea, the following worked for me:

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

Related questions

How to add facebook share button on my website?

I have this code that suppose to work, but doesn't work. If this helps you in anyway that would be great. <script src='http://connect.facebook.net/en_US/all.js'></script> <p><…

Read More
Responsive width Facebook Page Plugin

Facebook introduced a new Page Plugin to replace the Like box plugin. Documentation: https://developers.facebook.com/docs/plugins/page-plugin/ I'm replacing the Like Box plugin with this new plugin. On some websites I've used this CSS code to make …

Read More
Given URL is not permitted by the application configuration

I have used this in my html page... <script> window.fbAsyncInit = function() { // init the FB JS SDK FB.init({ appId : 'xxxxxxxxxxxxxx', // App ID from the App Dashboard status : true, // check the login status upon init? cookie : true, // set …

Read More