> For the complete documentation index, see [llms.txt](https://help.pagefly.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.pagefly.io/faq-and-troubleshooting/troubleshooting/live-site-issue/responsive-mobile-horizontal-scroll-issue.md).

# Responsive mobile horizontal scroll issue

### Overview

Sometimes when you see your pages on the mobile, the page ends up with an undesired extra space to the right. (It slides from the left to the right). In this article, you will learn [how to avoid this issue.](https://help.pagefly.io/manual/responsive-mobile-horizontal-scroll-issue/)

![](/files/C1uyjEhC2sDEc6DjSHPe)

### Why Does Responsive Mobile Horizontal Scroll Issue Happen?

Basically, the main reason for this issue happening is that the content of the page has a bigger width than the device’s width.

For example, the mobile device's width is 375px, but there is an element having more than 375px, so you have to scroll horizontally to see the full element.

In some cases, if you set the negative margin-left and right for an element, it can cause this issue.

### How To Fix Responsive Mobile Horizontal Scroll Issue?

You can check this video tutorial for more visualization:

{% embed url="<https://youtu.be/b6nBY2qwv4k?si=wf7-7mNCG4VRJhhn>" %}

* **Step 1: Open the** [**Custom Code Editor**](https://help.pagefly.io/manual/custom-code-editor/)

Navigate to the bottom left corner, hover over it to see the feature Add custom Code popping up, and make a left-click.

![](/files/jEyQ6zvDtAZbHpsGi6pf)

#### Step 2: Paste the Custom CSS code

And then, go to this [link](https://gist.githubusercontent.com/Sally165/733ac26f923c45527660767f6b560031/raw/8cbc2635a11c2200126c7f4f15d3e92ffcf0ee3c/gistfile1.txt) to get the code and paste it into the Custom CSS box like the image below

![](/files/s23BIYreamSv9oMUttlO)

Click on the Save change button and publish the page to see the result.

{% hint style="info" %}
**Note**: If the above code does not work, you can change it into this [code](https://gist.githubusercontent.com/Sally165/bb201756c04293de1040300d2b6c7bf7/raw/81c2ad51aa3d02b8de8491e78ddcff8c2b9902da/gistfile1.txt). Please notice this CSS when the page has a sticky section or sticky header on mobile. This code will disable sticky sections.
{% endhint %}

### Tips And Best Practices

* Check Element Widths: Ensure no element exceeds the device’s width to prevent horizontal scrolling.
* Avoid Negative Margins: Negative margins can cause overflow; use them cautiously.
* Use Custom CSS: Apply custom CSS to fix issues with horizontal scrolling on mobile devices

### Frequently Asked Questions

**1. What causes horizontal scrolling?**

Content wider than the device’s screen, often due to oversized elements or negative margins.

**2. How can I fix the scrolling issue?**

Use the provided custom CSS code to correct the overflow problem.

### Additional Resources

* [How to Use PageFly Slideshow Element?](https://help.pagefly.io/manual/slideshow-element/)
* [PageFly Page List Won’t Stop Loading](https://help.pagefly.io/manual/infinite-loading-error-in-pagefly-page-list/)


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://help.pagefly.io/faq-and-troubleshooting/troubleshooting/live-site-issue/responsive-mobile-horizontal-scroll-issue.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.