Question

Please take a look at this.

I’ve tried adjusting the overflow properties and changing the widths of the images but the scroll bar remains at the bottom of the screen.

Does anyone know what is causing this and how to stop this?

Answer 1

The problem is in your .slideshow definition (style.css:199…).

The browser tries to solve the formula:

left
+ margin-left
+ border-left-width
+ padding-left
+ width
+ padding-right
+ border-right-width
+ margin-right
+ right
= parent width

and fails because left is 50% and width is 100%. Your use of margin:-800px won’t help on a device with display width of 1920px, as (1920*1.5 – 800) is 2080 and thus too wide for a device of that size.

Use the following definition instead, as it will implicit create a element with an width of 100%.

.slideshow{
    z-index: -9999;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
}  

See also CSS Positioned Layout Module Level 3: Section 7.1. Keep in mind, that even when you use the technique described above users with a display width of less than 1024px will have a scrollbar. For this issue try body{overflow-x:hidden;}.

Your old code (don’t use it! only for completion):

.slideshow{
    z-index: -9999;
    position: absolute;
    top: 0;
    left: 50%;
    width: 100% !important;
    margin-left: -800px;
}