100% Width Facebook Comments on Business Catalyst

IF you are developing a responsive website on Business Catalyst and use the facebook module you may encounter an issue with the comments not playing nice with your responsive layouts. Luckily with a few tweaks you can easily make your facebook comments responsive too.

Your Facebook Comments module may look something like the following:

{ module_facebookcomments, moduleTemplateGroup="Default", language="en_US", url="http://address.com", posts="15", width="800px", colorScheme="light"}

This will not play nice with your responsive Business Catalyst website. To address this all you need to do is take the following steps:

1. Remove the width from your facebook module:

{ module_facebookcomments, moduleTemplateGroup="Default", language="en_US", url="http://address.com", posts="15", colorScheme="light"}

2. All you need to do is add the following CSS to your stylesheet:

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