How to fix horizontal scrolling issue on mobile

Unwanted horizontal scrolling on a Framer website often occurs when the overflow property of a breakpoint is set to “visible” and one or more sections are wider than the viewport. Here’s how to fix it.

How to identify and solve the problem

As mentioned above, this issue is caused by elements that are too wide for the viewport. Setting the overflow property to “hidden” might hide the problem, but it can also disrupt sticky elements on the page.

To truly solve the problem, you’ll need to identify which elements are too wide. If the issue isn’t immediately visible in a browser, here are some common cues to check in your project:

  1. An element with a fixed width (in pixels).

  2. An element with a large min-width value.

  3. An element with position: absolute that is positioned outside (or at the edge of) the current viewport.

  4. An animation effect with an X-offset, rotation, or scale that temporarily extends an element beyond the viewport, even if it’s not fully visible or fades in via opacity.

  5. An element with width: fit that could exceed the viewport width.

Once you’ve identified the problematic elements, you can fix the issue by setting their width to “fill” so they fit within the viewport.

Conclusion

You can fix overflow problems by either hiding the overflow or adjusting the width of the elements causing it.

If the issue persists after these changes, you can also ask for help in our community support channel, where a Product Specialist can assist with troubleshooting.