A page has fb comments inserted. The page structure in firebug looks like this:
<div class="fb-comments fb_iframe_widget" data-numposts="10" data-width="550" data-colorscheme="light" data-migrated="0" ....

How to change the data-width and make it dependent on screen width, or in other words, responsive to HTML5 media queries?

Comments

Liliplanet’s picture

Liliplanet CreditAttribution: Liliplanet commented

add this to you default theme css

.fb-comments, .fb-comments * {
    width:100% !important;
}

and just keep your 'width' at /admin/structure/fbsocial/presets empty

Liliplanet’s picture

Liliplanet CreditAttribution: Liliplanet commented 
#fbcomments, .fb_iframe_widget, .fb_iframe_widget[style], .fb_iframe_widget iframe[style], #fbcomments iframe[style] {width: 100% !important;}
#fbcomments span, .fb_iframe_widget span, .fb_iframe_widget span[style], .fb_iframe_widget iframe span[style], #fbcomments iframe span[style] {width: 100% !important;}