Why does mobile preview always scroll horizontally?


#1

When I view my landing page in mobile preview, it never shows the full screen, it always shows with a tiny bit off screen and I need to scroll horizontally.  When I’m looking in edit mode, nothing is out of bounds.  Am I doing something wrong or is that a bug?


#2

If you have “Out-of-bound warnings” checked, wouldn’t we easily see any tiny elements beyond our mobile version’s borders? I guess not if they’re extremely small, impossible to see without zooming in, but I don’t think you can zoom in with Unbounce. 

As the OP asked, what do you do when all elements are within the borders, but when you preview you still see the horizontal scroll bar?


#3

Hi Gabriel, 

Joe is right that most probably is an element out of bound. 

If you can’t spot it just open up your “Page Content” section and start going through each element, one by one and making sure it’s on the page. 

![](https://d2r1vs3d9006ap.cloudfront.net/s3_images/1324380/RackMultipart20151207-21567-81l76j-Edit A - RepairPal_Shop-dt-_ inline.png?1449476262 “Image: https://d2r1vs3d9006ap.cloudfront.net/s3_images/1324380/RackMultipart20151207-21567-81l76j-Edit__A__-__RepairPal_Shop_-dt-__inline.png?1449476262”)

It’s a bit tedious but this way you can account for all elements. 

If that doesn’t solve the issue, reach out to Unbounce support and they will take a look. 

Best,
Hristian


#4

Hi Gabriel, 

Joe is right that most probably is an element hiding somewhere on the edges of the page. 

One way to make sure, you’ve accounted for all elements is to open up your “Page Contents” list and start going through it one by one. 

![](https://d2r1vs3d9006ap.cloudfront.net/s3_images/1324382/RackMultipart20151207-15069-1ocb9lm-Edit A - Phone_Number inline.png?1449477030 “Image: https://d2r1vs3d9006ap.cloudfront.net/s3_images/1324382/RackMultipart20151207-15069-1ocb9lm-Edit__A__-__Phone_Number__inline.png?1449477030”)

It’s a bit tedious but this way you can make sure you are not leaving anything outside the page. 

Things to look out for:

  • 1px (height) horizontal lines
  • Boxes you’ve used on the desktop version 

Another option is to start hiding each section in the mobile editor until the scrolling disappears. Once you find the section with the problem, you can further investigate what element in it causes the issue. 

If you still can’t find the problem, just reach out to Unbounce support directly and I’m sure they troubleshoot it for you.

Best,
Hristian


#5

Hi guys,

I have this issue and have been through my page contents one by one and there’s definitely nothing (either visible or hidden) on the mobile page off, or even touching, the edges of the page.

I will reach out to Unbounce support directly too but it might be helpful to others if there’s another answer?

Regards

Bobby


#6

Hi Bobby, 

It would help if you can share a link to the page in question so we can take a look. 

Otherwise, reach out to the support team at Unbounce and I’m sure they’ll be able to figure it out.

Best,
Hristian


#7

For me it happens on pretty much every page I build (of which there’s hundreds!) here’s the one I’ve been through item by item today: http://claim.riftrefunds.co.uk/tax-refund-1/

Bobby


#8

Hi Bobby, 

I just tested the page on my iPhone as well as through the browser simulating a few different mobile devices. 

No horizontal scrolling on either of my tests. 

Sorry, I couldn’t be of more help. 

Best,
Hristian


#9

Thanks Hristian,

Yeah it looks fine live, the issue is in the mobile preview view which I think was what was happening for the previous posters too.

I’ll wait to see what support say

Bobby


#10

The issue is just that on an actual mobile, you can use your finger to scroll by touching any part of the screen so no need for scroll bars. On the mobile preview, it puts the scroll bars over the top of the page, blocking some of your 600 pixel width, meaning you have to scroll to see what is behind them.


#11

Hello Josh,

Go into the page editor and switch to mobile version of your landing page.  Scroll vertically and horizontally past what looks like the border of your landing page in mobile.  I had this happen once and there was a tiny element the farther point it would let me scroll.

If you don’t find anything then I’d recommend reaching out directly to customer support.

Hope that helps and best of luck.

Regards,

Joe