Horizontal scrollbars issue

[kaevans]

Hello, I have tasked with making the final edits on the this new site at http://melindcooper.com/BCT/

I have a problem with horizontal scroll bars at the bottom; I think it might be something to do with the Book a Project button that is attached to the right of the screen.

Any ideas?

THanks

[silic5494]

Well since no elements are actually going over the right border, you could just do the following:

body{
   overflow-x: hidden;
}

This could serve you as a temporary solution until you find out what’s causing the overflow problem.

[kaevans]

Thank you, I’ll try that, I think it might be something in the actual content somewhere.

[PaulOB]

The scroll is caused by your features desktop img which is pulled to the right by -390px.

.features .desktop img{right:-390px}

If you set it to display:none you will see most of the scrollbar disappear.

That section is badly coded with magic numbers so can’t offer a quick fix as you also have sizes being set in the js. I suggest you wrap that whole section in a div that is 100% wide and hide the overflow (overflow:hidden).

Not sure what you expected to happen when you dragged the image 390px to the right anyway

[ronpat]

@kaevans

I have a problem with horizontal scroll bars at the bottom;

The horizontal scrollbar is being caused in part by the absolutely positioned desktop images:

<img class="vc_single_image-img attachment-full" src="http://melindcooper.com/BCT/wp-content/uploads/2019/03/project.png" alt="" srcset="http://melindcooper.com/BCT/wp-content/uploads/2019/03/project.png 800w, http://melindcooper.com/BCT/wp-content/uploads/2019/03/project-768x761.png 768w" sizes="(max-width: 800px) 100vw, 800px" height="793" width="800">

and

<img class="vc_single_image-img " src="http://melindcooper.com/BCT/wp-content/uploads/2019/03/people-700x705.png" alt="people" title="people" height="705" width="700">

It is further being caused by mistakes in using bootstrap… not adhering to the rules of the framework, horizontal margins in particular… trying to “work around them” using javascripts.

Companies like to use frameworks such as bootstrap to make their code as consistent and as functional as possible. Unfortunately, the intent falls apart when their coders are more familiar with JS than with HTML/CSS and bootstrap. The amount of JS being called on this page is obscene. This page is 98% read only. It could be written almost entirely with HTML and CSS and woruld perform brilliantly.

I expect my suggestion to fall on deaf ears, but I would recommend turning off JS and rewriting the page, then add JS to enhance the page rather than to control major elements.

[ronpat]

@silic5494

Well since no elements are actually going over the right border, you could just do the following:

body{
   overflow-x: hidden;
}

That is horrible advice. Something is overflowing the boundary of the page. How would preventing valid horizontal scrolling help one find the overflowing element?

[kaevans]

Thank you Paul, long time no talk! I used to get your help way back in 2003-2004 on here. You have been here forever…

Thanks again