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
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.
To remove a horizontal scroll on a website, check and adjust the CSS for elements exceeding the screen width and ensure they fit within the viewport. Additionally, set the CSS property “overflow-x” to “hidden” on the main container to prevent horizontal scrolling.