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.
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’.
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.
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.