White Bars on the side of my published project

Responsive Responsive Layouts
1

I’m having an issue where mobile browsers shrink my scene and add white bars and white space at the bottom of my scene inside the browser.

If you look at the following URL on a modern phone like a Galaxy S5 or an iPhone6 you can see the white space, except I’ve turned it into Black so it’s not so noticeable.

trees.jonnonorton.com

I can’t figure out why it’s shrinking my scene, I’d rather have it go from edge to edge like it does on iPad.

I’m wondering if I need to create a new ‘Default Scene Width’ preset for new devices. Or perhaps it’s an issue with how these devices downsample their resolution? https://medium.com/@brucewangsg/the-curious-case-of-iphone-6-1080p-display-b33dac5bbcb6

I don’t know but I’m wondering if anyone else has run into this issue and solved it with a particular trick.

2

A few ways to fix this:

The underlying problem is that the iPhone 6 is 375px wide, so you’ll need to have your 320 pixel-wide document expand to fit that (or convert it to a 375px-width breakpoint).

  1. Change the width of your smallest breakpoint to be 375 instead of 320. This would show the same layout for iPhone 4, 5, and 6.
  2. Alternatively, you could duplicate your current breakpoint and make a new, slightly adjusted layout with the 375w breakpoint for the S5 and iPhone 6 and 6+. This would ensure you have a iPhone 4 and iPhone 6+ layout.
  3. One additional way which might be even quicker is to have your 320w layout be flexible, so the background elements (the maroon color and the buttons at the bottom) expand to fill the area behind your document. Though this might result in text that’s a bit too small on an iPhone 6.

Make sure you have your ‘Viewport Width’ set to ‘Document Width’ in your Document inspector.

3

I’m not sure how solution 1 fixes my problem. I did that and I now have huge white bars on the sides of my original artwork inside of Hype. Can you expand upon this removing the white bars in my mobile browser?

2 is the hardest solution but seems like what I’m stuck with.

3 won’t work for me as my artwork can not expand. My designer would cry crocodile tears if I stretched his artwork.

4

You already have the larger version of this image (you used it in the iPad layout) so you can use that here. Enlarge your image to fit the width of the new 375px wide layout.

If you enlarge just the background elements it won't create any issues with your layout.