devot:eeDevoted to ExpressionEngine

Hi Rein,

Is there a way to control the fixed width that has been assigned to multiple elements?

Currently a fixed width of 500px is automatically assigned to multiple elements (see this visual reference: http://screencast.com/t/FgwdPhzO). The site is built on a responsive framework and I need to make the comments container more flexible however have been unable to see anywhere that I can adjust the settings?

You can see a live example here: http://justresultsproperty.com.au/blog/post/real-estate-agents-mt-gravatt-brisbane

I’m looking forward to hearing back from you soon!

Thanks,
Dan

Did you use the width=”” param? The default is 500px, but you can override it.

Rein

Hi Rein,

I couldn’t see anywhere in your documentation where it shows where to implement the width parameter?

I tried to apply it this way:

{exp:fb_tools:comments width=“100%”}

However, the result was not good:

http://screencast.com/t/gOyUl4nx

Please advise on the correct way to adjust the width?

Thanks,
Dan

Hi Rein,

Ok - I’ve just found the docs section for width (http://reinos.nl/add-ons/facebook-tools/docs/comments) however this is for fixed PX size. Not really useful in a responsive environment.

Is there a work-around?

Thanks,
Dan

hmm, well facebook himself don`t support responsive design. Perhaps you can try this: http://stackoverflow.com/questions/6500424/is-it-possible-to-set-a-fluid-width-for-facebooks-social-plugins

Hi Rein,

Thanks for forwarding that SO link through.

Based on everyones comments, and few tweaks of my own, I have managed to get the plugin to behave in a responsive manner.

Below is the CSS I implemented to achieve this (feel free to include in your docs if you want?):

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

In the above CSS, I have specifically targeted the “.ee_fb_tools_plugin-comments”. If you remove this part of the syntax it will target all FB widgets on the page.

I hope this helps other people with the same or similar issue.

Thanks for your quick responses and feedback!
Dan

Hi Dan,

Thanks for sharing your code.

Best,
Rein