SOLVED: Facebook Comments 100% Width Problems

So you started off by following our Facebook Comments tutorial for your WordPress site. Then you browsed through the full list of HTML5 attributes for Facebook Comments. After all of this, you might be still have an issue with setting your Facebook Comments to 100% width. This post will give you a little background into the situation, and show you how to easily correct it using only CSS.

A Common Size Problem With Facebook Comments

Notice how our site features the Facebook Comments at 100% width? Notice how if you shrink and expand your browser window’s width the comments not only adjust in size, but wrap neatly? This is not a default feature.

First of all, you should know that Facebook is routinely making changes to its social plugins (Facebook Comments being one of these plugins). Recently, they’ve introduced a new change that allows you to bypass setting the data-width attribute to a pixel count, and instead let you set it directly to 100% for a fluid layout.

When we installed Facebook Comments, we found that if a user’s window loaded the page with the comments and was resized to a larger size, the comments stayed at the initial width, despite the data-width attribute value being set to 100%. Our complete set of settings were (and still are):

CSS Solution

To correct the problem, we had to modify two elements in our CSS file. If you use Facebook Comments, and are running into the same issues that we did, try copying and pasting the code below into your website’s style sheet (and let us know if the comments if it worked for you!)