Home App Docs Blog Github

How do I remove horizontal scroll?

I am facing an issue is that I creating a landing page using builder drag and drop elements so I get a horizontal scroll which I don’t want and I try a lot to remove that but couldn’t find any solution. Please help!

Builder content link
Builder.io: Drag and drop page builder and CMS

Builder public api key
3c050ba57dc649028146159db46afef3

What are you trying to accomplish
I am creating a landing page using builder drag and drop elements

Screenshots or video link
23.09.2021_15.09.05_REC

1 Like

Hi Praveen! That’s a great question. This is usually caused by an element that is flowing over the width of the available screen space, and you typically want to avoid something like that. For your project, I wasn’t able to find any elements that were definitely out of place, so I’ve added a line of simple CSS that makes anything that flows over the edge of the page completely invisible. This removes the unwanted horizontal scroll bar.

To add a line of CSS to your content page, you can visit the DATA tab, then scroll to the bottom and click the CUSTOM CSS + JS button. In the CSS panel, you can write this line to hide ALL overflowing elements for the page:

body {
  overflow: hidden;
}

Thank you for your response and solution.