Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17


Website Layout Different on iPhone

Posted on 2014-02-28
Medium Priority
Last Modified: 2014-03-08

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.
Question by:rbudj
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 3
LVL 75

Expert Comment

by:Michel Plungjan
ID: 39897080
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.

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

Uncaught SyntaxError: Unexpected token ILLEGAL (index):31

SyntaxError: Invalid character '\u8203'
LVL 16

Author Comment

ID: 39897426
Well you tell me what console you are referring to so I may also check the errors?
LVL 75

Expert Comment

by:Michel Plungjan
ID: 39898217
Hit F12 in most browsers
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

LVL 16

Accepted Solution

rbudj earned 0 total points
ID: 39902006
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;" />
LVL 75

Expert Comment

by:Michel Plungjan
ID: 39902713
Great you solved it
LVL 16

Author Closing Comment

ID: 39914444
Needed viewport meta tag

Featured Post

Application Discovery Service in AWS

In the era of the cloud, customers migrating away from their existing on-premise infrastructure. This requires lots of planning, strategies, and effort to identify their existing resources and determine how best to migrate.  Datacenter migrations happen in four phases -

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
Without even knowing it, most of us are using web applications on a daily basis.  In fact, Gmail and Yahoo email, Twitter, Facebook, and eBay are used by most of us daily—and they are web applications. We generally confuse these web applications to…
Any person in technology especially those working for big companies should at least know about the basics of web accessibility. Believe it or not there are even laws in place that require businesses to provide such means for the disabled and aging p…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

715 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question