Solved

Website Layout Different on iPhone

Posted on 2014-02-28
6
436 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
  • 3
  • 3
6 Comments
 
LVL 75

Expert Comment

by:Michel Plungjan
Comment Utility
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
Comment Utility
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
Comment Utility
Hit F12 in most browsers
0
IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 
LVL 16

Accepted Solution

by:
rbudj earned 0 total points
Comment Utility
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
Comment Utility
Great you solved it
0
 
LVL 16

Author Closing Comment

by:rbudj
Comment Utility
Needed viewport meta tag
0

Featured Post

Free Trending Threat Insights Every Day

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

Join & Write a Comment

Suggested Solutions

Title # Comments Views Activity
Fire Fox doesn't show calendar on html page ? 5 43
.Net Web Site Password specs 2 19
Hovering effect 9 28
SVG Logo 4 16
Have you tried to learn about Unicode, UTF-8, and multibyte text encoding and all the articles are just too "academic" or too technical? This article aims to make the whole topic easy for just about anyone to understand.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

728 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

Need Help in Real-Time?

Connect with top rated Experts

9 Experts available now in Live!

Get 1:1 Help Now