Why is there white space/scrollbars on mobile?


#1

:x: The Problem

“I made a nice page but in the mobile view I have a bottom scroll bar and a lot of white space on the right side, any solution?”

“Help! When I open the page on my iphone the page slides horizontally.”

“How come there’s white space on mobile (iphone/android)?”

"Mobile view has horizontal scroll bars . "


:white_check_mark: The Solution

Although this might seem like a major issue, it’s actually super easy to fix. Basically what’s happening is that there is an element on your mobile layout that is extending outside of the safe-zone of your published page.

It might not look like it, but if you dig through your mobile layout you’ll likely find an image, logo or box that’s out of bounds somewhere.

Step #1: Turn on Guides

Guides will help visualize where the out-of-bounds elements are. If anything is out of the published area of where it should be, it’ll be highlighted in red.

Step #2: Turn on Page Contents

By turning on Page Elements, you can then go through each layer to see if there’s anything that’s turned on but not being used. If you find something out of the ordinary, just hide it by pressing the eyeball - or simply delete. it.

Step #3: Misplaced Elements

Scroll as far as you can to the right and look for anything that’s highlighted in red. Elements could be hard to see, or completely transparent, but if you have guides on they should be easier to spot. If you find something that’s out of place, feel free to move it, hide it or delete it.


:link: Related Resources

For a more detailed instruction on how to use Mobile Responsive, check out this Academy article. Alternatively, you can check out this workshop that walks through all of this (and much more) in a helpful video.


Mobile White Space/Width
Mobile Responsive FAQ's