FlexSlider adding gap to right of page

Question

So got a problem with Flexslider. Seems to be adding a gap of about 50 pixels (stretching the page) to the right of the page. If you hover over the slide, the gap disappears. It is really strange. Any ideas?

I know it is nothing else on the page because if I take out the flexslider code, it seems to work fine.

Thanks for your help.

Answer 1

Changing these styles in flexslider.css:

from

.flex-direction-nav .flex-prev { left: -50px; }
.flex-direction-nav .flex-next { right: -50px; text-align: right; }

to

.flex-direction-nav .flex-prev { left:0; }
.flex-direction-nav .flex-next { right: 0; text-align: right; }

worked for me.

Answer 2

Looks like the flexslider navigation controls are adding in the extra space. When you hover over the slider, the "right" directional arrow comes into view and is therefore not off the screen, and thus, not adding extra space.

Adding "overflow: hidden" to your flexslider class should resolve your problem here.