Hi everyone,

 

I really hope someone will be able to help me! I am getting pretty frustrated with my website www. frodshamweb .co .uk which when published a couple of months ago, worked fine on iPhone, android browser and also Chrome mobile browser which is what I use on my HTC One X and of course on desktop browsers.

 

It seems now for some reason (may be something to do with the chrome update I did a couple of days back) that when looking at the website on an android, the text size is out of proportion and rather big. It overlaps the footer and is a real pain and makes the whole website unreadable!

 

On an iPhone is stays in proportion to the rest of the page and other text sizes and isn't responsive. When using Chrome on Android, the text rules the roost and has a mind of it's own.

 

I have attached screenshots, any help would be really really appreciated!

 

Thanks,

 

Jack

 

 

 

 

 

 

 

Looks like a not clearing floats problem

Thanks Mteam, have you got any suggestions of ways to fix it?

You have div class lefttext and div class rightimage. They are both floating, which removes the height of the parent container.

You have already given the parent container a fixed height of 750px:

<div class="textcontent" style="height:750px;">

but in a mobile browser .textleft is taller than the parent element.

 

Here is more info on clearing floats - http://css-tricks.com/snippets/css/clear-fix/ and

http://www.quirksmode.org/css/clearing.html

try adding clear:both to .road & .footer and the height will need adjusting on .testimoniallogo

 

I haven't tested this

Thanks for your help! I will try your suggestion mteam but what would the height need changing to on the .testimoniallogo?

 

I understand the problem a bit more after your explanation teodora, thank you for that!

 

So just to clarify, do I need to add a clear:both to the parent container like below and this will solve the problem for all the normal pages?

 

<div class="textcontent" style="height:750px;" div style="clear: both"> 

Then if I add clear:both to the css for .road and .footer the problem will be solved on the homepage?

 

This is very frustrating! Thanks for your help!

 

 

Jack

I think it might be best to use the clearfix method for that one, because you need to clear the children of .textcontent

 

Add this to your CSS:

.clearfix:after {
	visibility: hidden;
	display: block;
	font-size: 0;
	content: " ";
	clear: both;
	height: 0;
	}
* html .clearfix             { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */

Then add class .clearfix to .textcontent:

 

<div class="textcontent clearfix"> 

You need to remove the fixed height of 750px, to allow .textcontent to expand vertically if needed.

 

Hope that works for you

Thanks for your suggestion Teodora but after trying it on the webhosting page of my site the same problem still occurs. Will using a 'sticky footer' work?

 

Then I just need to find a way to fix the homepage!

You need to remove style="height:750px;" from your CSS declaration...

If I remove height:750px will this fix the problem completely? I did remove height:750 from www. frodshamweb .co.uk/webhosting and also added class="clearfix" but it still hasn't solved the problem