Phoca Forum

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

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

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?

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

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:
Is this code OK? Do I have to put the "100" or just the "%", or both, like I did?

Thanks a lot!!

Hi, it is OK: width:100%

Jan

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 2) to your custom css add this 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
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

Hi, thank you for the guide.

Jan

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

Hi madona,

madona wrote: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