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

CSS

Posted by Konstantin Nikkari
Konstantin Nikkari
5,185 Points

A scrollbar on a scrollbar

Hey,

I have edited a WordPress theme www.autopesucenter.fi

When viewed in mobile there appear a second scrollbar on top of a normal scrollbar and that way they the scrolling is blocked for a moment. How can I fix this?

Ash Scott
Ash Scott
435 Points

I can't see an issue. Can you upload a screenshot so we can see it? :)

Kind regards, Ash

3 Answers

Ash Scott
Ash Scott
435 Points

Add:

.col-full {
    overflow-y: auto;
}

That should fix it :)

Edit: Further investigation shows something in #footer-widgets is causing it, but the overflow then hides the little yellow arrow. The code above will cut it off too, but I suggest remove that yellow arrow on the :before tag and increase the padding of the #footer-widgets and go from there.

Konstantin Nikkari
Konstantin Nikkari
5,185 Points

Thanks a lot! I'll try these. Could you please share how did you find these issues? I'd like to know this for future problems like this.

Ash Scott
Ash Scott
435 Points

Of course :)

Being a scroll issue I knew you could add overflow: scroll in CSS, so my first thought was that something overflowing a container was breaking it. I added the overflow-y: auto to the .col-full class in dev tools and it fixed it, so I knew then that something using that class had an issue. I then took the overflow-y: auto off the .col-full class and added it inline to each <div> which had that class until the scroll bars disappeared. It eventually disappeared on the footer.

Let me know if you need anything else :)

Konstantin Nikkari
Konstantin Nikkari
5,185 Points
Konstantin Nikkari
Konstantin Nikkari
5,185 Points

Sure. Here you go http://s22.postimg.org/3zg2xdvkh/duoble_scrollbar.png

:)

Konstantin Nikkari
Konstantin Nikkari
5,185 Points
Konstantin Nikkari
Konstantin Nikkari
5,185 Points

Thanks a lot!

After you said the problem is in footer I started to investigate and found out that there was and CSS issue with the footer logo because it took style from the header logo. After some code fixes I didn't have to use overflow-y: auto and now the back to top orange arrow can stay as it is.

Ash Scott
Ash Scott
435 Points

Well done! Glad you sorted it in the end :D