Designing in Webflow for iPhone6

[joemitchell]

Hi there,

I've designed a one-page site in webflow (using elements of the 1Frame template) and it is looking good in a broad variety of browsers and formats (desktop/tablet/small mobile), except iPhone6/6 Plus, in which it appears quite broken – both the nav (from a template) and body area:

webflow version: https://preview.webflow.com/preview/rina-chae-full-site?preview=01f9513f9d37d08a0fbe64710d1f9d37

live site: http://rinachae.co.nz/new/

template nav is from: http://webflow.com/template/1Frame

I would really value some support/advice on the easiest/best way to fix the site to also work on iPhone6/6Plus, without inadvertently overriding the layout design on smaller mobile devices. It's my first major webflow project, so quite new to things (and I probably designed some aspects in a less-than-ideal way – for example there's lots of specific pixel widths used etc)

I was be really grateful for support on the easiest way I can get the site (both nav and body) working perfectly asap,

Grateful thanks in advance,

Joe

[cyberdave]

Hi @joemitchell, thanks for the post Sorry to hear about the trouble with the layout. In these cases, it is good to create a duplicate of the site, and try and "divide and conquer" the site layout through a process of elmination.

Using this method, I noticed that you have some overflow on the section under the white filler section. This might be part of the problem. I think a little more investigation is needed.

I would first check that you are not using negative values for margin or padding and that you are not using any fixed widths in pixels on any elements that go beyond the viewport widths. I would use percentage based widths.

I am still looking at this, and will try to provide some additional feedback as soon as possible Would recommend for you to create a duplicate of the site, so we can test using the duplicate, and once the issue is found, you can update the main design

Cheers, Dave

[joemitchell]

Hi @cyberdave, thanks so much for your fast and detailed reply – very grateful!

I've gone through your the site your suggestions and uploaded a revised version of the site:

rinachae.co.nz/signoff

It looks like what might be going on is an iPhone6 zoom issue – when the page first loads on iPhone6 & iPhone6 Plus it loads fine, but as soon as a user begins to interact (click the nav menu, or scroll down) the site automatically seems to 'zoom in' (please see before and after below):

Onload

After user clicks/scrolls

What do you think's going on, and what's the easiest way to resolve this you think?

Looking forward to hearing your thoughts ,

Grateful thanks in advance

Cheers,

Joe

[samliew]