Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

WordPress

alex mattingley
alex mattingley
7,508 Points
Posted by alex mattingley
alex mattingley
7,508 Points

Problems with Wordpress Portfolio Site and horizontal scrolling

Hi Everyone,

I am working through the Wordpress portfolio site and there is a small issue with the front page. Despite spending a pretty considerable amount of time on this, I cant seem to figure out why the page is scrolling side to side under some circumstances.

If your mouse is on the flexslider, it will not scroll side to side. If you scroll down the page a little bit, the page will scroll slightly right to left exposing blank space and cutting off content on the left side of the page.

Has anyone else run into this problem before with this site? I believe that the problem lies with the flex slider but I honestly dont know how to fix it.

Here is the site, take a look and let me know if you can figure it out.

http://alexmattingley.com/

2 Answers

Dustin Matlock
Dustin Matlock
33,856 Points

Hey Alex, can you see if this will fix the issue?

html, body {
    max-width: 100% !important;
    overflow-x: hidden !important;
}
alex mattingley
alex mattingley
7,508 Points
alex mattingley
alex mattingley
7,508 Points

Dustin,

Bingo. I did the max-width, and the overflow-x on the body already but I didnt do it on the html element. Thanks for the help, site is fixed now, looks beautiful and none of that pesky horizontal scrolling.

Dustin Matlock
Dustin Matlock
33,856 Points

Awesome, glad it worked. The only thing I'd recommend to is adding some left and right margins. The content is a tad too close to the edge of the viewport. Great looking website by the way!

alex mattingley
alex mattingley
7,508 Points
alex mattingley
alex mattingley
7,508 Points

Dustin, thanks for your input, its definitely still a work in progress, ill take the margin stuff into consideration

Shawn Flanigan
PLUS
Shawn Flanigan
Courses Plus Student 15,815 Points
Shawn Flanigan
Shawn Flanigan
Courses Plus Student 15,815 Points

Alex,

It looks like the problem is stemming from the ul with the flex-direction-nav class. Not sure what the fix is yet, but I'll tinker around with it for a while and see if I can figure anything out.

Shawn Flanigan
Shawn Flanigan
Courses Plus Student 15,815 Points
Shawn Flanigan
Shawn Flanigan
Courses Plus Student 15,815 Points

It looks like it has to do with the nav icons transitioning to a position off-screen when you scroll below the flex slider. Hiding the overflow of the containing div doesn't seem to work on these transitioned elements (as far as I can tell).

The easiest workaround I've found is to edit the position of the elements. Change .flex-prev to left: 50px; and .flex-next to right: 50px;. The direction of the animation will change (the nav arrows will move from the inside out as the appear...and outside in as they disappear), but it eliminates the margin issues further down the page.

If you really want the arrows to move in the original direction, I'm sure there's a way to do it using javascript...and there may be another css workaround (I don't know if animations render differently than transitions?), but the above solution will certainly be less time-consuming.

alex mattingley
alex mattingley
7,508 Points
alex mattingley
alex mattingley
7,508 Points

Hi Shawn,

Thanks for your help. Ends up that you just need to set the max width and the overflow properties for both the body and the html elements and that fixes it.

Thanks for you help!

Alex