CODEWITHSUNDEEP
htmlwidthfacebook-comments
Santiago
Santiago

Reputation: 2455

Facebook Comments HTML5 Mobile: Fluid 100% not working

http://developers.facebook.com/docs/reference/plugins/comments/

It says there that:

The mobile version will automatically show up when a mobile device user agent is detected. You can turn this behavior off by setting the mobile parameter to false. Please note: the mobile version ignores the width parameter, and instead has a fluid width of 100% in order to resize well in portrait/landscape switching situations. You may need to adjust your CSS for your mobile site to take advantage of this behavior. If preferred, you can still control the width via a container element.

But when I visit my page on the iphone, although I see the "mobile design" of the Facebook Comments, the width of the box is the one I set on the code.

My test page: http://www.santiagosarceda.com/facebook/

This is my code:

<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
</head>
<body>
<div class="fb-comments" data-href="http://www.site.com/3953172" data-num-posts="5" data-width="300"></div>
</body>
</html>

The box allways renders at 300px width.

Is there any problem with Facebook Comments itself? Because a few days ago everything was working ok.

Thanks for reading!

Upvotes: 1

Views: 4547

Answers (1)

Vaibhav K
Vaibhav K

Reputation: 842

The Facebook Comments generates inline style that has changed and the following CSS seemed to override the inline SPAN CSS for me to make Facebook Comments Fluid Width

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

I hope this works for you.

Upvotes: 11

Related Questions