Website Layout Different on iPhone

rbudj
rbudj used Ask the Experts™
on
http://www.ginacaters.com

This website displays fine on the desktop but on the iPhone it is pushed to the left hand side. See attached screenshots. Notice the drop shadow under the banner image? It does not extend all the way across. Also notice the expanding divs and the rest of the page is also pushed to the left.

Any solutions on how to fix this? This is just one of a few of my sites doing this. I'm working on converting them all to be responsive but I need to fix this problem for now.
screenshot1screenshot2
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Michel PlungjanIT Expert
Top Expert 2009

Commented:
There are some issues you need to solve first - the page does validate but I get this in the console


The value "1425px;" for key "width" was truncated to its numeric prefix. www.ginacaters.com/:9

Error parsing a meta element's content: ';' is not a valid key-value pair separator. Please use ',' instead. www.ginacaters.com/:9

Uncaught SyntaxError: Unexpected token ILLEGAL (index):31

SyntaxError: Invalid character '\u8203'

Author

Commented:
Well you tell me what console you are referring to so I may also check the errors?
Michel PlungjanIT Expert
Top Expert 2009

Commented:
Hit F12 in most browsers
Ensure you’re charging the right price for your IT

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

Commented:
Fixing the validation errors was not the problem. After further research I found that I needed to use viewport meta tag and set it to the widest element on the page:

<meta name="viewport" content="width=device-width, user-scalable=no">

In my case it was:

<meta name="viewport" content="width=1425px;" />
Michel PlungjanIT Expert
Top Expert 2009

Commented:
Great you solved it

Author

Commented:
Needed viewport meta tag

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial