If you are anything like me, your trying to work Responsive Design into all of your designs. Fairly simple CSS trick allows a website to scale nicely no matter the device that is viewing it. But one of the more challenging obstacles is external widgets served as an iFrame. This is the case with Facebook Comments.

The standard implementation of the Facebook Comments code includes calling the Facebook JavaScript SDK and a single line of html for the DIV container. This installation sets a ‘data-width’ parameter that tells Facebook how wide Facebook Comment widget should be. In a responsive design, you want to avoid setting width. Set widths do not scale with the website on different browser sizes.

Responsive Facebook Comments Code

Modify the data-width parameter, so that there is no width specified. So rather than having data-width=”480″, write ‘data-width’.

<div class=”fb-comments” data-href=”http://example.com” data-width data-num-posts=”2″></div>

Responsive Facebook Comments CSS

The solution is to utilize CSS overrides on key elements within the Facebook Comments Widget. This is going set an importance on the width element to be 100%, rather than the set width that is served by Facebook.

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

That is it. Pretty simple to update and add to a responsive stylesheet. To see a Responsive Facebook Comments in action, check out the comments section below.