Width 100%

  • josepmon

    (@josepmon)


    10 years 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/

Viewing 1 replies (of 1 total)
  • Tyler Johnson

    (@tylerjohnson-libertyalliance)

    9 years, 10 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!

Viewing 1 replies (of 1 total)
  • The topic ‘Width 100%’ is closed to new replies.