Solved

Website Layout Different on iPhone

Posted on 2014-02-28
6
461 Views
Last Modified: 2014-03-08
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
0
Comment
Question by:rbudj
[X]
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
6 Comments
 
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. 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
 
LVL 16

Author Comment

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

Expert Comment

by:Michel Plungjan
ID: 39898217
Hit F12 in most browsers
0
Report: Liquid Web beats Amazon, Rackspace & More

A study by performance analyst firm Cloud Spectator finds that Liquid Web beats rivals Amazon, Rackspace and DigitalOcean when it comes to website and cloud application performance.

 
LVL 16

Accepted Solution

by:
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;" />
0
 
LVL 75

Expert Comment

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

Author Closing Comment

by:rbudj
ID: 39914444
Needed viewport meta tag
0

Featured Post

Space-Age Communications Transitions to DevOps

ViaSat, a global provider of satellite and wireless communications, securely connects businesses, governments, and organizations to the Internet. Learn how ViaSat’s Network Solutions Engineer, drove the transition from a traditional network support to a DevOps-centric model.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Node.js 11 82
Telerik RadEditor Control Save 8 39
Ways to Manage 2 Development Projects on Same Section 1 39
output in HTML format powershell 6 51
Developer portfolios can be a bit of an enigma—how do you present yourself to employers without burying them in lines of code?  A modern portfolio is more than just work samples, it’s also a statement of how you work.
FAQ pages provide a simple way for you to supply and for customers to find answers to the most common questions about your company. Here are six reasons why your company website should have a FAQ page
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

751 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