Hide/remove horizontal scrollbar on the bottom of my home page

I have been trying to look for solutions to hide or remove the horizontal scrollbar which shows on my home page but none have worked so far. Is there any way I could modify or add code so that I could remove it? 

My website is: https://www.legacyproject.co.uk/

Any help would be greatly appreciated

1,099 Views
Message 1 of 2
Report
1 REPLY 1

The horizontal overflow is almost certainly an overpadding issue with one or more of your multi-columnar content layouts. Before you attempt to address this with a blanket css band-aid of "overflow:hidden", I'd suggest that you fix the underlying problem. In your home page banner, for instance, when you scroll your page as far right as possible, you see that the "Get Involved" button is sitting off the right edge of the banner image which tells you that there is too much padding in the encapsulating column for that element. Additionally, you'll note that your blog page, testimonials page, and contact page don't have this issue. The home page and all the "Who We Are" pages do have the issue. So the offending page elements are common to those pages only.

A good seek-and-destroy method would be to create a copy of one of those affected pages. Publish and take a look at the page on the front end. Now, delete a page section or delete all the elements within a page section. Re-publish and refresh the copy page on the front end to see if the horizontal scroll bar is still there. If it is, proceed to the next page section and repeat. Do this until the horizontal scroll bar disappears. This will help you pin down the page components that are causing the overflow issue (in the extreme case, if you delete all content on the page, that will definitely get rid of the overflow issue).

1,086 Views
Message 3 of 2
Report