Full width flexslider creates horizontal scrolling

HTML & CSS
1

On this page > http://clickbump.com, when you scroll down the page to trigger the appearance of the “back to top” widget (lower right hand corner of the page), you can see that as soon as the widget appears, it causes horizontal scrollbars to appear.

This does not happen on interior pages, which has led me to suspect that my FlexSlider widget is causing the width to be greater than 100%.

Any ideas how I can work around this issue? I want full width, edge to edge, slider, but I never want horizontal scrollbars.

2

Hi Scott,

It looks like its the next button that is causing the scroll as you are moving off the right by 36px.

Try hiding the overflow on the flexslider and see if that cures the issue (wiuthout causing any others hopefully).


.flexslider{overflow:hidden}
3

Thanks for the suggestion Paul. That definitely works, but as you suspected, it has side effects. Setting the overflow:hidden on the flexslider container hides the control nav div (the dots below the slider). Apparently the default css for flexslider positions that outside the flexslider container.

Here’s what I came up with to make it play nice:

.flexslider{overflow:hidden;padding-bottom:30px;margin-bottom:0}
.flex-control-nav{bottom:-10px;background:#fff;padding:12px 0}
4

Glad you got it working :slight_smile:

5

Absolutely. Thanks (as always) for steering me in the right direction :slight_smile:

BTW, thought you might be interested in this: http://clickbump.com/wordpress-speed-challenge-clickbump-vs-genesis-thesis/