Title: Width 100%
Last modified: August 21, 2016

---

# Width 100%

 *  [josepmon](https://wordpress.org/support/users/josepmon/)
 * (@josepmon)
 * [12 years, 2 months ago](https://wordpress.org/support/topic/width-100-103/)
 * 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/](https://wordpress.org/plugins/fatpanda-facebook-comments/)

Viewing 1 replies (of 1 total)

 *  [Tyler Johnson](https://wordpress.org/support/users/tylerjohnson-libertyalliance/)
 * (@tylerjohnson-libertyalliance)
 * [11 years, 11 months ago](https://wordpress.org/support/topic/width-100-103/#post-4793970)
 * 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.

 * ![](https://s.w.org/plugins/geopattern-icon/fatpanda-facebook-comments_7c8c66.
   svg)
 * [Facebook Comments by Fat Panda](https://wordpress.org/plugins/fatpanda-facebook-comments/)
 * [Support Threads](https://wordpress.org/support/plugin/fatpanda-facebook-comments/)
 * [Active Topics](https://wordpress.org/support/plugin/fatpanda-facebook-comments/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/fatpanda-facebook-comments/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/fatpanda-facebook-comments/reviews/)

## Tags

 * [Comments](https://wordpress.org/support/topic-tag/comments/)
 * [css](https://wordpress.org/support/topic-tag/css/)
 * [full](https://wordpress.org/support/topic-tag/full/)
 * [style](https://wordpress.org/support/topic-tag/style/)
 * [width](https://wordpress.org/support/topic-tag/width/)

 * 1 reply
 * 2 participants
 * Last reply from: [Tyler Johnson](https://wordpress.org/support/users/tylerjohnson-libertyalliance/)
 * Last activity: [11 years, 11 months ago](https://wordpress.org/support/topic/width-100-103/#post-4793970)
 * Status: not resolved