Website Layout Different on iPhone

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
LVL 16
rbudjAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

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

Michel PlungjanIT ExpertCommented:
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'
0
rbudjAuthor Commented:
Well you tell me what console you are referring to so I may also check the errors?
0
Michel PlungjanIT ExpertCommented:
Hit F12 in most browsers
0
Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

rbudjAuthor 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;" />
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
Michel PlungjanIT ExpertCommented:
Great you solved it
0
rbudjAuthor Commented:
Needed viewport meta tag
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
Responsive Web

From novice to tech pro — start learning today.