Facebook Comments changes the stylesheet on mobile

Question

I'm coding a responsive website and it is the first time that I'm using Facebook Comments tool. Everything is correct except when I access it on mobile.

Facebook Comments generates a new stylesheet for mobile. I'm looking for some code that disables or ignore this new stylesheet.

Screenshots... - on desktop - on mobile

Answer 1

You can add CSS of your own to over ride the FB css and make the comments box responsive. Just add this to your CSS

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

Answer 2

Got it! To disable the stylesheet for mobile, we must insert a new attribute (mobile="false") in HTML code.

<div class="facebook_comments">
   <div class="fb-comments" data-href="http://example.com" data-mobile="false"></div>
</div>

Thanks a lot!

\o/