Thread

Hey guys

I’m coding a website for a client, and I can’t get my head around how to prevent the slideshow (which is 1500px wide) from causing the page (which is 1000px wide) to overflow.

I’ve set overflow-x:hidden on the body tag, which successfully hides the horizontal scrollbar. But when using two-finger horizontal scrolling I still get a black edge on the right hand side of the page. See the attached screenshot.

The slideshow itself looks like this:

<div id="slideShowWrapper">
      <ul id="slideShow"> 
      {exp:channel:entries channel="slideshow" dynamic="off" disable="member_data|pagination|trackbacks"}   
            <li>{slideshow_image}</li>
      {/exp:channel:entries}
      </ul>
</div>

By the way, setting overflow-x:hidden on the html tag causes a whole load of weird errors, so that’s a no-go…

It’s not really clear what you are trying to do here. To have a slideshow wider than the page doesn’t make much sense. Do you mean if all images were to stand side by side and be visible?

It would really help to have a link on this.

Hi

Sorry, but I can’t provide you with a link as of yet (but in a few days!).

The thing here is that we want the slideshow to be wider than the rest of the content, to look better for those with larger screens, but without causing a scroll for those with smaller screens. I.e. the slideshow can’t affect the page width as a whole.