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...). It would be nice if it recognized the width but the @media seems to be the only way.Facebook made some changes to the outputted markup from the comments plugin. I found I had to use this to make it work .fb-comments, .fb-comments > span[style], .fb_iframe_widget iframe[style] { width: 100% !important; }This is no longer a solution, Facebook has changed the way they render the iframe and now they are setting the width inside, so you can have the iframe 100% width but not the content.Agreed with AlexLopezIT. Thank you !! user agent is detected. Group Plugin. Facebook now sets the width of a div inside the iframe.this works for me but i have changed .fb-like to .fb-like-box because my container is .fb-like-box.it's a pity this is still static though. Should I edit this answer accordingly?Does this work with the new facebook code, considering that a div now has a set width inside the iframe?This no longer works either. your coworkers to find and share information. Making the above css: Facebook suggests rerendering the content, but I'm not sure how to do that. im toying with doing @media queries to resize it depending on the size of browser window. as 100% (e.g. Is it possible to reflect this things on like-share plugins too ?This works on the page plugin, provided you change the class names from 'fb-comments' to 'fb-page'. You $ ( '.fb-page' ) . Facebook introduced a new Page Plugin to replace the Like box plugin.I'm replacing the Like Box plugin with this new plugin. That makes sense =) Now I've configured the It seems very... very odd that facebook would not consider scenarios requiring a bit more flexibility with the new page plugin... Any updates in the future to override the min/max widths? Mikel's answer is a good start:We have pushed a fix for this. to adjust your CSS for your mobile site to take advantage of this Also, just set the #content selector to whatever you want the comment box to match such as a container div...That's how it works: just add this data-width="100%" //fb_iframe_widget_fluid is added in same situation, but only for mobile devices (tablets, phones) //By removing those classes FB.XFBML.parse() will reset the plugin widths. Set iFrame Height To Fit Its Content - jQuery frameLoader.

I am new at this, so I am not sure if this is the most elegant solution to making the like button repsonsive. site design / logo © 2020 Stack Exchange Inc; user contributions licensed under
I have a combination of your solution, with added .fb-comments, .fb-comments iframe[style], .fb-comments span {width: 100% !important;} in the CSS, which made it nicely responsive! it should be fixed numbers. Where developers & technologists share private knowledge with coworkersProgramming & related technical career opportunitiesSame issue as well: 280px width gets added by fb script itself. Facebook now sets the width of a div inside the iframe.That might have worked in the past, but facebook has updated their code, so this no longer works.Wonder if that is a new capability? It loaded on refresh though. By using our site, you acknowledge that you have read and understand our I think it's a small bug of the new fb feature.Unlike Twitter widgets, it seems that at least Facebook Page plugin is not responsive. This amended CSS from what was shared above did the trick.Here is some jquery that should persist across changes to the output markup as it uses a regex expression to rewrite the width only, leaving the rest of the style tag alone.You need to specify the correct container id or selector, replacing my example of: #footer-last.

updated too: Edit: this will create the plugin to adapt it's width to the available space at load time.

Stack Overflow works best with JavaScript enabled Set a variable and clear it before setting a new onethe above code is to make it responsive, if you want to explicitly set the width to 220px you can do so with pure css.

It doesnt seem to like percentages and doesnt see the size of the box it's in so this isnt working. We've also launched new design for Facebook Page Plugin that showcases the cover photo of your Page.