CODEWITHSUNDEEP
htmlcss
imjp
imjp

Reputation: 6695

How do I get rid of the horizontal scroll bar at the bottom?

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?

Upvotes: 0

Views: 2109

Answers (4)

Zeta
Zeta

Reputation: 105886

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;
}

Upvotes: 3

elclanrs
elclanrs

Reputation: 94101

This should get rid of it, just tried in devtools.

body { overflow-x: hidden; }

Upvotes: 1

Abhranil Das
Abhranil Das

Reputation: 5918

You can do as Mr. Pallazzo said, but this will chop off all content to the right side (that you're now having to scroll to see) which you probably don't want. Please take a good look instead at the width specifications of the wrapper divs etc. Your div called wraper has a width set as 1003px. It is best not to set dimensions in such absolute terms, and instead use percentages.

Upvotes: 0

Wouter Dorgelo
Wouter Dorgelo

Reputation: 11978

overflow-x:hidden; 
overflow-y:auto;

should do it.

or to be on the safe side, to cover browsers that might not support that: 

overflow:auto; 
overflow-x:hidden;

Upvotes: 1

Related Questions