How to stop horizontal scrolling on mobile?

Need help New Responsive Engine
1

With a desktop browser everything within my “index” container, including text and inputs, wraps around or shrinks to a minimum width that i set at 320.

However, when I view the page on a mobile (safari) the content initially sits within the screen, all nicely shrunk and wrapped to fit, but I am able to scroll into blank space, a little to the left of the content and a considerable amount to the right. This gives the content an appearance of wobbling around in a bigger space.

I’ve got the preset page width as “Full Width” (but also tried “centred”) and I have the min width at zero and cannot see any other settings that would help.

It is almost as if the index container is sitting within a wider page container when viewed on mobile but as I understand it the index container is the page container.

A workaround might be to create a separate mobile page but this rather defeats the objective of having a responsive design and the nightmare of maintaining multiple versions of the same thing.

Any help would be much appreciated.

Gary

2 Likes
2

Hello!

Most likely, the layout is not quite correctly configured.

You need to check all inner elements, not just the main container (and not just groups, but other elements as well, including texts, inputs, etc.). Perhaps one or more of them have a fixed or minimum width that is greater than the width of the mobile phone. Or maybe one (several) has margins and/or peddings that prevent it from being less than or equal to the mobile phone’s width.

Most likely the reason is this.

1 Like
3

I think you are right. After a lot of detective work on template components I found the main culprit…a fixed width footer.

There is still a little horizontal scroll on my iPhone, although it is fine according the the responsive editor preview. But I think you put me on the right track and I’ll do some detective work and do some sums on margins and padding.

Thanks for point me ion the right direction.

Gary