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 trialalex mattingley
7,508 PointsProblems 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.
2 Answers
Dustin Matlock
33,856 PointsHey Alex, can you see if this will fix the issue?
html, body {
max-width: 100% !important;
overflow-x: hidden !important;
}
Shawn Flanigan
Courses Plus Student 15,815 PointsAlex,
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
Courses Plus Student 15,815 PointsIt 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
7,508 PointsHi 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
alex mattingley
7,508 Pointsalex mattingley
7,508 PointsDustin,
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
33,856 PointsDustin Matlock
33,856 PointsAwesome, 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
7,508 Pointsalex mattingley
7,508 PointsDustin, thanks for your input, its definitely still a work in progress, ill take the margin stuff into consideration