Howto: Responsive Facebook Comments Box Using CSS

Recently while developing a site for a friend they wanted Facebook comments instead of the regular WordPress comments. Integrating was very easy, however when it came to making the site responsive the Facebook comments box which is an iframe didn’t want to play along and instead was being cut off.

After trying numerous solutions online (all which seemed to be out of date) I eventually got it to work using the below code. Hopefully this helps you out as well.

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