Responsive Facebook comments

[peterchris1986]

Okay.

Can you see what is wrong if you get a link to the page?

The link is http://www.luksuste.dk/index.php/ugens-te-fra-cakao

The problem is when a see my page from a mobile, then the box is way to wide:0...

[Jan]

Hi, in the settings (see html source code), there is:

style="width:40"

which means, that the fixed width is set there. Such cannot be responsive

Jan

[peterchris1986]

I have changed the width from 40 to 100% under the module manager - but this has not changed anything.

Do you have any ideas as to what might be wrong?

[Jan]

Hi, in the html code is: style="width:100" which means px, the percentage is not there The percentage needs to be set directly in the code:

modules/mod_phocafacebook_comments/tmpl/default.php and you need to add the % there - just search for the "width"

Jan

[buddybradley]

Hi Jan, sorry to bother you

I modified the CSS file like you said, but I think I did something wrong because the module doesn´t change size:

Code: Select all

echo '<fb:comments href="'.  $tmpl['uri'] .'" '.$cCount.' style="width:100%"'.  (int)$tmpl['fb_comment_width'] .'" '.$colorScheme.'></fb:comments>';

Is this code OK? Do I have to put the "100" or just the "%", or both, like I did?

Thanks a lot!!

[Jan]

Hi, it is OK: width:100%

Jan

[phmedia]

i dig into this problem because i needed it for my site, and did those changes dont know if they are properly made but they work so no garantuee

1) /modules/mod_phoca_facebook_comments/tmpl/default.php replace the line 112 with this

Code: Select all

echo '<fb:comments href="'.  $tmpl['uri'] .'" '.$cCount.' style="width:100%'.'" '.$colorScheme.' data-width="100%"></fb:comments>';

2) to your custom css add this

Code: Select all

.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;}

.fb_iframe_widget span[style] {width: 100% !important;}

3) and in the modules/mod_phoca_facebook_comments/assets/style.css change all the fixed width to width: 100% !important; just to be sure so you will get something like this

Code: Select all

#phoca-facebook-comments {
	position:relative;
	width: 100% !important;
}
/* Twitter */
#phoca-facebook-comments .pfbct {
	float: left;
	width: 100% !important;
	padding: 2px;
}
/* PlusOne */
#phoca-facebook-comments .pfbcp {
	float: left;
	width: 100% !important;
	padding: 2px;
}
/* FB Send */
#phoca-facebook-comments .pfbcs {
	float: left;
	width: 100% !important;
	padding: 2px;
}
/* FB Like */
#phoca-facebook-comments .pfbcl {
	clear:both;
	position:relative;
	display:block;
	padding: 2px;
	text-align:left;
}
/* FB Comments */
#phoca-facebook-comments .pfbcc {
	float: left;
	width: 100% !important;
	clear:both;
	padding: 2px;
}
/* LinkedIn */
#phoca-facebook-comments .pfbci {
	float: left;
	width: 100% !important;
	padding: 2px;
}

/* MySpace */
#phoca-facebook-comments .pfbcm {
	float: left;
	width: 100% !important;
	padding: 2px;
}

#phoca-facebook-comments .cb {
	clear:both;
}

5) put with into the module in format 100% dont know if this is necesary but all together it works

tested on android phone and tablet, chrome, firefox worked beautifully with responsive template from rockettheme

[Jan]

Hi, thank you for the guide.

Jan

[madona]

Thanks very much Phmedia, it worked for me. Please my question is on #2, where do I locate my "Custom CSS"?

i dig into this problem because i needed it for my site, and did those changes dont know if they are properly made but they work so no garantuee

1) /modules/mod_phoca_facebook_comments/tmpl/default.php replace the line 112 with this

Code: Select all

echo '<fb:comments href="'.  $tmpl['uri'] .'" '.$cCount.' style="width:100%'.'" '.$colorScheme.' data-width="100%"></fb:comments>';

2) to your custom css add this

Code: Select all

.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;}

.fb_iframe_widget span[style] {width: 100% !important;}

3) and in the modules/mod_phoca_facebook_comments/assets/style.css change all the fixed width to width: 100% !important; just to be sure so you will get something like this

Code: Select all

#phoca-facebook-comments {
	position:relative;
	width: 100% !important;
}
/* Twitter */
#phoca-facebook-comments .pfbct {
	float: left;
	width: 100% !important;
	padding: 2px;
}
/* PlusOne */
#phoca-facebook-comments .pfbcp {
	float: left;
	width: 100% !important;
	padding: 2px;
}
/* FB Send */
#phoca-facebook-comments .pfbcs {
	float: left;
	width: 100% !important;
	padding: 2px;
}
/* FB Like */
#phoca-facebook-comments .pfbcl {
	clear:both;
	position:relative;
	display:block;
	padding: 2px;
	text-align:left;
}
/* FB Comments */
#phoca-facebook-comments .pfbcc {
	float: left;
	width: 100% !important;
	clear:both;
	padding: 2px;
}
/* LinkedIn */
#phoca-facebook-comments .pfbci {
	float: left;
	width: 100% !important;
	padding: 2px;
}

/* MySpace */
#phoca-facebook-comments .pfbcm { :D 
	float: left;
	width: 100% !important;
	padding: 2px;
}

#phoca-facebook-comments .cb {
	clear:both;
}

5) put with into the module in format 100% dont know if this is necesary but all together it works

tested on android phone and tablet, chrome, firefox worked beautifully with responsive template from rockettheme

[christine]

Hi madona,

Thanks very much Phmedia, it worked for me. Please my question is on #2, where do I locate my "Custom CSS"?

it depends on your template. e.g. in standard Protostar you can active a custom.css.

So, if you don't use custom.css, may be you have a template.css. Put relevant CSS Codes at the end of your e.g. template.css

Kind regards, Christine