Responsive iPhone problem

Hi,

I'm wondering if someone could take a look at the following page on an iPhone and tell me why there's a white gap down the right side of the page?

http://church.webdevsvr.com/cg/
SheppardDigitalAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Tom BeckCommented:
I see you already have a meta tag for device width. That was my initial suggestion.
0
COBOLdinosaurCommented:
Why would you expect a page with 35 validation errors to work cross browser and cross device?

http://validator.w3.org/check?uri=http%3A%2F%2Fchurch.webdevsvr.com%2Fcg%2F&charset=%28detect+automatically%29&doctype=Inline&group=0

The image errors are nothing, but using obsolete code is going to produce unpredictable results.  Not declaring a charset result in a default that then gives an encoding error.

Clean up the code, and then if there is still a problem at least we will know there actually is a real error and not just sloppy code.

Cd&
0
SheppardDigitalAuthor Commented:
To be fair, most of the errors were nothing to worry about anyway.

alt tag errors where just because we've got nothing to put in yet
cellpadding and cellspacing - fair enough, I'll accept that.
iframe errors - that's the code supplied by google, but I've corrected it anyway.

Problem still exists.
0
The Ultimate Tool Kit for Technolgy Solution Provi

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy for valuable how-to assets including sample agreements, checklists, flowcharts, and more!

GaryCommented:
Try setting min-width: 100%
0
SheppardDigitalAuthor Commented:
what should I set the min-width on?
0
GaryCommented:
HTML, BODY
0
SheppardDigitalAuthor Commented:
Nope, still have the large space.
0
GaryCommented:
Can you paste a screen shot
0
SheppardDigitalAuthor Commented:
0
GaryCommented:
You seem to be doing something with the natural scroll bar, try adding overflow-x:hidden
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
SheppardDigitalAuthor Commented:
Perfect, that's fixed it.

Thanks
0
GaryCommented:
If it doesn't work with html/body try applying it to all elements
* {overflow-x:hidden}

There is probably a div screwing up the layout, but obviously it's not easy to debug on the phone itself, without going through all your media queries manually.
0
Tom BeckCommented:
Actually, I think it's the logo. The width is fixed at 389px but an iPhone screen is 320px. The logo width should be 100% so it scales with the screen width.
0
GaryCommented:
tommyBoy could be right, you have some funny things going on with that section with padding and negative margins.
0
SheppardDigitalAuthor Commented:
thanks, I'll take a look.

If I'm honest, its the first responsive site I've had to build, hence the issues.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
HTML

From novice to tech pro — start learning today.