Ready to get started?Download WordPress


Facebook Comments by Fat Panda
Width 100% (2 posts)

  1. josepmon
    Posted 4 months ago #

    Hi everyone,

    I'm trying to make the comment box to take the full with of the available space, and I've been trying to use some code which is already not working for me:

    .fb-comments, .fb-comments span, .fb-comments iframe {
        width: 100% !important;

    Using this code is still missing a div that is not affected, which is getting the fixed width. This does not have an static id, and it looks like this:

    <div id="feedback_xxxxxxxxxxx" style="width: 550px;">

    Even if trying to use the following code, it does not work for me:

    	width: 100% !important;

    Any idea of how to solve the issue?
    Thanks in advance.


  2. Tyler Johnson
    Posted 2 months ago #

    Hey Josepmon,

    I know this is 2 months two late, but I thought I'd go ahead and post this for anyone else that is interested, or if you happen to look back at this.

    I was able to get the box to 100% width and here's how. I used the following CSS:

    #FatPandaFacebookComments {
    margin-top: 12px;
    div.fb-comments {
    width: 100% !important;
    .fb_iframe_widget span {
    width: 100% !important;
    .fb_iframe_widget iframe {
    width: 100% !important;

    But, just that doesn't make it 100% width. Like you, I ran into the problem of the id="feedback_xxxxxxxxxx" where the numbers changed on each refresh, so I couldn't apply any CSS to it.

    You have to go into a plugin file to edit that and make it 100%.

    Go to Plugins > fatpanda-facebook-comments > comments.php

    Find div class fb-comments. Within that div is a data attribute title data-width. Change that width to 100% and you now have a comment box that is 100%.

    And yes, the CSS from the beginning is still needed. Let me know if you have any trouble!


You must log in to post.

About this Plugin

About this Topic