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?
The correct working answer is a combination of things I found here. Mikel's answer is a good start:
Facebook Developers Platform link
This says:
We have pushed a fix for this. From now on, you can specify the width as 100% (e.g. data-width="100%") to get a fluid layout. Docs are updated too: https://developers.facebook.com/docs/plugins/comments Thanks for your patience.
But... This will load the width of what's available to the plugin at loading time. When you resize your page it will remain the same width it had when you loaded the page. To fix this - and make a true responsive version of the Facebook Social Plugin - Add the following in your CSS:
.fb-comments, .fb-comments iframe[style], .fb-comments span {
width: 100% !important;
}
This will cause the plugin to resize to the available space as you resize the window.
If you want this code to work for the page plugin, change the class-name 'fb-comments' to 'fb-page':
.fb-page, .fb-page iframe[style], .fb-page span {
width: 100% !important;
}
(thanks for the addition Black_Stormy!)