CODEWITHSUNDEEP
htmlcssfacebook
user967451
user967451

Reputation:

How to make Facebook Comments have a fluid width of 100%?

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

This is how I generate the comments area after including the Facebook javascript SDK on the page:

<div class="fb-comments fb-comments-update" data-href="http://site.com" data-width="600" data-colorscheme="light" data-num-posts="10" data-order-by="social" data-mobile="auto-detect"></div>

As you can see facebook sets the width of the comments area based on this data attribute you give it:

data-width="600"

In this case I am telling facebook I want the area to be 600 pixels. But I am currenly building a responsive site and need the comments section to fit the width of the screen 100%. Doing none of these works:

data-width="100"
data-width="100%"

Is there any way to get a fluid width for facebook comments?

Upvotes: 1

Views: 3695

Answers (2)

Alex Shd
Alex Shd

Reputation: 71

Try this code:

<style>.fb-comments, .fb-comments iframe[style], .fb-like-box, .fb-like-box iframe[style] {width: 100% !important;}
.fb-comments span, .fb-comments iframe span[style], .fb-like-box span, .fb-like-box iframe span[style] {width: 100% !important;}
</style>

Upvotes: 4

miszczu
miszczu

Reputation: 1189

First size is for devices smaller then 1200px and bigger then 979px. The only problem is with IE sometimes, but you can use something like that: width: 1200px\9; - IE 8 and above

This sample is from bootstrap, which I'm using very often. To use it you need less win version. But this code works in aby browser (except old IE).

.fb-comments { width: 490px; /* or width: 50%; */ }

/* Large desktop */
@media (min-width: 1200px) {
    .fb-comments { width: 600px; /* or width: 50%; */ }
}

/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) {
    .fb-comments { width: 400px; /* or width: 50%; */ }
}

/* Landscape phone to portrait tablet */
@media (max-width: 767px) {
    .fb-comments { width: 30px; /* or width: 50%; */ }
}

/* Landscape phones and down */
@media (max-width: 480px) {
    .fb-comments { width: 200px; /* or width: 50%; */ }
}

Also try to use percentage, not pixels, even with padding, for example:

.fb-comments { width: 90%; height: auto; padding: 0 5%; }

Upvotes: 1

Related Questions