0

I am looking for a solution to my issue. I have a css parallax effect on my site, which seems to work fin as you scroll vertically down the page. The issue is that it is also scrolling horizontally if the browser window width is reduced to be less than the width of the page content. I do not want the parallax effect horizontally. The css I am using is:

background: url(images/home.jpg) 50% 0 no-repeat fixed; 
height: 500px;  
margin: 0 auto; 
width: 100%; 
max-width: 1920px; 
position: relative;

The sample site is http://bantamgraphics.com/parallax/ If the browser window is less than 1000px, a horizontal scroll bar appears and the page background color dark grey shows on the right side. Is there a way to block the horizontal scrolling?

Improve this question
3
  • adding overflow-x: hidden to body may be? Commented Apr 18, 2016 at 16:46
  • Thank you Mike, that does work with preventing the entire page from having a horizontal scrollbar. I would prefer to only prevent the image area from scrolling, but this may be a temporary solution. I tried adding overflow-x: hidden to just the #home article style but that did not work either. Commented Apr 20, 2016 at 14:32
  • If that's the case, you can add the same css rule to parent container of that image. set width: 100% and overflow-x: hidden. Commented Apr 20, 2016 at 14:33

2 Answers 2

Reset to default
0

You have a few items with an inline width set to 1000px, that's why they're showing horizontal scrolling at anything below that breakpoint.

<div style="width:1000px; height: 93px;" align="center" id="topnav">

and...

<table width="1000" border="0" cellspacing="0" cellpadding="0">

Also, in your table below you have the four sections. Those four boxes are 230px width each, so 230*4=920px plus the 40px padding you have set up on each side (1000px total) is more than the viewport when the screen is less than 1000px wide.

I'd suggest using something a bit more fluid than a table for the four equal boxes section.

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

Thank you Shawn, but there are a few instances where I need the content to be fixed at 1000px under the parallax. So I am looking for a style or alternate way to only have the parallax effect be vertical.
0

I found a solution to the issue. By adding min-width to each horizontal div, the site no longer scrolled horizontally past the content.

sitewrapper {min-width: 1000px;}

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.