CODEWITHSUNDEEP
htmlcss
MG1
MG1

Reputation: 1687

Prevent horizontal scroll, overflow property isn't working

I am using very wide shapes as the background on my website (to create a certain visual effect) and am not able to prevent the horizontal scrolling. Is there any other way to achieve that besides the overflow property which doesn't seem to work for me? http://tinyurl.com/kahfjha

Upvotes: 0

Views: 51

Answers (2)

sharshi
sharshi

Reputation: 1003

in your css #contact-shape and #design-shape Are width:5000px remove that and it works fine.

#design-shape {
background: none repeat scroll 0 0 #e98e82;
position: absolute;
transform: rotate(-45deg);
height: 1040px;
top: 1200px;
left: 0;
width: 100%;
z-index: 6;
}

#contact-shape {
background: none repeat scroll 0 0 #000;
position: absolute;
transform: rotate(-45deg);
height: 1460px;
top: 2757px;
left: 0;
width: 100%;
z-index: 1;
}

Update: I changed the css a bit now its keeping the backgrounds in place as well.

Upvotes: 1

damian
damian

Reputation: 5444

Use overflow-x: hidden instead of overflow: hidden on the body element and it will work:

body {
    overflow-x: hidden;
}

Upvotes: 1

Related Questions