How to turn off Horizontal scrolling?

Hi folks,

I have designed a site and looks great on mobile and fits the screen perfect. However, on mobile or pc, if you scroll right the site shows a large white sidebar the length of the page. The page is designed in such everything is fit and within the center of the screen so I have no idea why it has the option to scroll right.

Is there a way I can turn this off entirely ? there is no need to have the option to scroll horizontally.

As you can see from the attached image, if you scroll right, you see this white bar which makes the site look poorly built. (probably is lol )

Any ideas on how to fix this or turn scrolling off ?

I have narrowed it down to my footer [Footer Dark Multi Column]. Hiding my footer seems to remove the scroll bar

Thanks

Nervemind. I figured it out.

My footer Section, had a margin set. Putting it back to 0 worked.

This can also happen sometimes if you set long lines of text to “no wrap.”

Anytime a component exceeds the width of the body, you will end up with a horizontal scroll line. It usually only happens if you change things with inline CSS (typically via the Appearance panel.) Adding fixed dimensions will often mess up Bootstrap’s built-in responsive behavior.

1 Like