CSS Issue on iPad/iPhone

Question

I have extensive experience in CSS and I cannot figure out what's going on with this one site I'm working on:

http://lockwoodstorage.com/

Everything looks fine on all browsers but on iPhone and iPad, the content backgrounds cut off on the left side. I've tried media queries and I've tried to locate in the browsers what container could be causing this but I can't seem to figure it out.

I know this is a pretty basic question (and I always use Stack Overflow as last resort) but perhaps there is an issue here that I'm not versed in (and that could help in the forum in the future; I will update the question if it is something more complex). Any ideas would be greatly appreciated. Thank you!

EDIT

FYI, I'm not trying to make this site responsive. I'm just trying to make it display correctly on iPhone and iPad. I've also been seeing an issue where the load time is SUPER slow on iOS for some reason.

When putting this site together, I used the Twenty Twelve theme and just customized it to my liking. It wasn't a responsive theme, just a basic one.

I've put a bounty out for this. Have at it! Thanks for the help.

Answer 1

In your header you are using CSS float:left property which is causing this problem.Just remove this CSS property and your problem will be solved.

And then if you want to float your elements to the left in header you can do it by targeting each individual element. for Example

#logo, #nav
{
 float:left;
} 

Also @ <div id=page> change max-height to min-height and you all set to go. I hope it will help you.

Answer 2

您必须在max-height:485px的位置使用min-height:485px max-height:485px

Answer 3

If you are going to make a website responsive you should build it mobile first. That way you can style each element with regards to the device to it gets displayed correctly, adding break points along the way for bigger devices.

At the moment it looks like you have built the site for desktop and then added a few media queries to reposition elements to try and make them fit. This will create more work for you and will definitely be frustrating.

If you want the site looking good on all devices I would recommend starting with mobile and restyling it, then work your way up to tablet and then desktop.

Answer 4

Mx I'll also agree with David. you should develop it mobile first because the way you are trying to customize it for mobile will take a lot of time and effort if you have issues in many places.

if you have issues in few places you can do it by putting media queries, Percentages for widths and heights instead of fix values. similarly you can use em instead of pixels where ever required.

However, as I mentioned earlier this will take more time to customize. So, i'll suggest to use Zurb Foundation or Twitter Bootstrap.