Responsive Facebook Comments CSS Hack Broken

responsive-design facebook-comments
user2407910 picture user2407910 · Mar 5, 2014 · Viewed 30.1k times · Source

I was using:

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

To make Facebook Comments responsive on my website. This was working fine and dandy just the other day. Today I look and they have changed their code. Is it possible to get this working again?

Answer

jonsuh picture jonsuh · Jul 16, 2014

Here's a new CSS-only solution. Did this for a project I'm working on today (July 16, 2014) and it works beautifully.

HTML

<div class="fb-comments"
     data-href="http://example.com/comments"
     data-numposts="10"
     data-width="100%"
     data-colorscheme="light"></div>

CSS

.fb_iframe_widget,
.fb_iframe_widget span,
.fb_iframe_widget span iframe[style] {
  min-width: 100% !important;
  width: 100% !important;
}

The trick are data-width: 100% and min-width: 100% !important; width: 100% !important;

Related questions

Responsive facebook comment box

I've been researching several different ways to force a facebook comment box plug-in to be fluid/responsive/liquid/whatever-we-call-it (just showing the stupidity of names), and all of them work fine. But also, all of them make the plug-in disappear …

Read More
Font scaling based on width of container

I'm having a hard time getting my head around font scaling. I currently have a website with a body font-size of 100%. 100% of what though? This seems to compute out at 16 pixels. I was under the impression that 100% would somehow refer …

Read More
Responsive font size in CSS

I've created a site using the Zurb Foundation 3 grid. Each page has a large h1: When I resize the browser to mobile size the large font doesn't adjust and causes the browser to include a horizontal scroll to accommodate for …

Read More