How to make Facebook Comments responsive – WordPress

How to make Facebook Comments Responsive for Fluid Layout Wordpress
VN:F [1.9.22_1171]

Facebook doesn´t provide a Facebook Comment solution for responsive (fluid grid) websites. When the browser window re-sized smaller, the facebook comment plugin will break out the layout of your page. To solve the problem just add the following code to your site´s stylesheet (wordpress = style.css) and your facebook comments will be responsive ;-)

#fbcomments, .fb_iframe_widget, .fb_iframe_widget[style], .fb_iframe_widget iframe[style], #fbcomments iframe[style] {
width: 100% !important;
}
VN:F [1.9.22_1171]
Rating: 0 (from 14 votes)

How to make Facebook Comments responsive – WordPress, 4.1 out of 5 based on 26 ratings

Weiter unten kannst Du ein Kommentar zu How to make Facebook Comments responsive – WordPress schreiben und Kommentare lesen.



11 Kommentare

  1. 13. April 2012 von Alex

    It works great but applies a 300px width on the like button, if you have one on the page.

  2. 13. Juni 2012 von Gaurav

    It doesn’t work for me. right now iam using overflow:hidden so that my fb comments dont break from the layout

  3. 19. Juni 2012 von David Knight

    Actually, this is wrong. The correct code is:

    .fbcomments, .fb_iframe_widget, .fb_iframe_widget[style], .fb_iframe_widget iframe[style], .fbcomments iframe[style], .fb_iframe_widget span {
    	width: 100% !important;
    }
  4. 21. Juni 2012 von Craig Bailey

    Try using this instead (to fix the issue with like buttons being affected):

    #fbcomments, .fb-comments, .fb-comments iframe[style], .fb-comments span {
    width: 100% !important;
    }

    • 25. Juli 2012 von surya

      this code worked for me….thanks a lot

      #fbcomments, .fb-comments, .fb-comments iframe[style], .fb-comments span {
      width: 100% !important;
      }

    • 11. Oktober 2013 von Mikey

      This works beautifully for a like box too:

      #fb-like-box, .fb-like-box, .fb-like-box iframe[style], .fb-like-box span {
      width: 100% !important;
      }

      Can’t thank you enough, great!

    • 27. Februar 2014 von david

      Thanks bro, its working 100%

  5. 22. Juni 2012 von Danny

    Same problem on iPhone :-((((

  6. 1. August 2012 von Franco

    You rocks my friend! Thanks!!!!

  7. 17. Februar 2014 von Luis

    Don’t work on mobile browser.

Hinterlasse eine Antwort

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

Du kannst folgende HTML-Tags benutzen: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>