WordPress.org

Ready to get started?Download WordPress

Forums

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

  1. josepmon
    Member
    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:

    div[id^='feedback']{
    	width: 100% !important;
    }

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

    https://wordpress.org/plugins/fatpanda-facebook-comments/

  2. Tyler Johnson
    Member
    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!

Reply

You must log in to post.

About this Plugin

About this Topic