Phone layout is leaving excess space between elements

Hoping there is a simple answer to this issue. On several pages of a website I created, in phone view after publishing there is a large space between my text element and a photo (and/or button). This space is not in the original design and does not show up in Preview, only when published; and it does not show up in the published computer and tablet custom layouts, only in the phone custom layout.

I tried putting the photo and buttons in a transparent layout block and that helped, but it still leaves more space than designed between it and the text. I am including three images. One is a screenshot of the design in Sitely, the second is the original issue with the larger gap, and the third is with the transparent layout block. This same behavior is happening on several pages, but here is the link regarding these images: About Kay Gardner

Any ideas on what causes the unwanted space? Thanks in advance.



Hi @updeinva :wave:t2:

In your website settings, go to “Miscellaneous” and uncheck the “Mobile auto-scaling” option. This should fix the issue :blush:

So that worked as far as the space issue goes, which is great to know. Doing this though definitely narrows the layout, leaving a lot of valuable space empty on each side of a small phone screen. It is even worse when viewing in landscape. Unless there is a workaround for this, I don’t think it is worth turning off the mobile auto-scaling. Seems to me there is something else at play which is causing the space issue.

@Allan nailed the issue with having you untick “Mobile Auto-Scaling”!
This is an iOS bug (which Apple has known for a very long time!!!) because mobile auto scaling works faultlessly on Android.

One sort of way around it is reducing the hight size of your Text Box containers.
I would not go about reworking the canvas so that it looks correct on iOS because this messes everything up on Android.

1 Like