White margin on edge of mobile prototype

[philipr]

Hi all,

Hope so much someone can help me with this, it’s driving me crackers!

I’ve created a prototype that’s 414px wide to view on an iPhone 6 plus.

I’m including a viewport tag with a width that’s 414px. The prototype in the Axure file is 414px wide (file attached). Here’s the settings for Mobile/Device:

When I upload it to Axshare and view it on the 6 plus, a white margin appears on the right hand side - meaning the prototype is not full width. Here’s how it looks:

It’s such a simple question, I know… but I cannot work out why I’m getting that margin and how to get rid of it. I’ve tried a lot of stuff.

I can set the initial scale to be 1.0 as a semi-workaround; but then I get a horizontal scrollbar, and the page annoyingly moves from left to right when you’re trying to drag vertically.

Aaaaaargh! What am I doing wrong?! Thank you!

Upload demo.rp (613.1 KB)

[tlebeau]

The only thing I can think of would be to open up your Project Options when viewing the prototype and test the scale options: Scale to fit width, Original Size, and Fit all to screen. What if you adjust the width in the Generate HTML window? Does the white margin grow or shrink depending on that width you set?

[philipr]

Thanks for the answer.

I eventually worked it out, but it was extremely annoying. I’m writing this explanation just in case it helps anyone else!

What I didn’t say in my original was was that all items on the canvas have to be no further left than 0px and none further right than (in this case) 414px - which I did know. It was the first thing I checked. I checked both by eye, but also by doing Cmd-A to select everything on the canvas, and then see where the right-most control corners appeared on the selected items - and all were on (or less than) 414px.

So what was it? Well, days later I noticed that an item on the canvas had a shadow (a very subtle shadow). The item itself was perfectly aligned to the 414px right hand canvas edge. And when selected, the control corners appeared to be exactly on the 414px line. But… the shadow is not included in the selection. And the shadow was pale and blurred, but 15px wide. And that… was the cause. The moment I turned the shadow off: problem gone. Shakes head…