[Plugin: WordPress Connect] Fluid Width CSS for WP Connect Comments iframe?

Hi, I’m not exactly sure what you mean. Could you please elaborate a bit, e.g. a web/screenshot of the problem etc.

Thanks

@scibuff, I’ve just updated/converted my WordPress website theme to a ‘responsive’ WordPress theme called Fluid, so that it displays correctly on mobile devices.

I’m slowly customising the theme… all was going well until I noticed that the FaceBook Comments plugin ‘WP Connect’ is not displaying the FaceBook Comments iframe plugin correctly. This is because the plugin only gives the option to adjust it’s width by setting a fixed width in pixels in the wp admin section. What I need is to be able to set it as a percentage, but that is currently not available using this plugin.

I’ve noticed that a lot of other people have had the same issue, and I’ve seen a few solutions such as this one: https://stackoverflow.com/questions/7447483/how-to-make-facebook-comments-widget-a-fluid-width
but, these solutions don’t seem to work on my site, I’m assuming because there is a conflict between the JS/PHP generated inline styles and the CSS used by the Fluid theme, which I am now trying to crack…

WordPress Theme: https://themefit.com/responsive-wordpress-themes/fluid/
WordPress Plugin: https://wp-connect.tomasvorobjov.com/ (Version 2.0.3)

Thanks D.

It’s been a while since I worked on this plugin … back then the facebook comments could have a width specified in the appropriate html tag but it accepted only pixel values. If percentage is now supported I’ll add it, if not I’ll have a look at some kind of css hack.

Thanks

Thanks scibuff! Massively appreciated, I’m sure this will help a lot of people experiencing the same problem. Thanks for your help! ??

Ok, I’ll see what I can do but have you actually tried viewing it on a mobile? I’m just asking because of the following (taken from facebook.com)

The mobile version will automatically show up when a mobile device user agent is detected. You can turn this behavior off by setting the mobile parameter to false. Please note: the mobile version ignores the width parameter, and instead has a fluid width of 100% in order to resize well in portrait/landscape switching situations. You may need to adjust your CSS for your mobile site to take advantage of this behavior. If preferred, you can still control the width via a container element.

…yep I read that all hopeful, but it doesn’t display at all using my iphone.

If you look at that page you mentioned (fb dev), and try and grab the code, it give this message: “This plugin does not have an iframe implementation. Please use the JavaScript SDK and the XFBML or HTML5 implementations.” not sure if that might have anything to do with it?