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

Loaded Responsive Bootstrap into Wordpress and Vertical Scroll Magically Disappears

Hi all,

I'm fairly new to coding so bare with me with my limited knowledge of the language.

I loaded a responsive Bootstrap into Wordpress however I notice that my vertical scroll disappears when my browser window is fully open, essentially preventing access to info hiding below.

Does anyone know where I should begin sussing out this problem? Started in the bootstrap.css, then tried bootstrap.responsive.css, looking for 'scrolling' commands, experimented with 'overflow' hiding and unhiding...I'm flying blind so a general point in the right direction would be much appreciated.

Cheers Chris

6 Answers

Do you have a link?

i'm building it locally, I guess that's not very helpful. Maybe this will explain, I used this tutorial: http://blog.teamtreehouse.com/responsive-wordpress-bootstrap-theme-tutorial

Hi Chris,

Without being able to see what the elements look like it's very hard to guess what could conflict.

Shame I can't donate some webspace for things like this!

Have you been able to identify what element is losing the scroll, such as html, body, a container with a specific ID or otherwise by commenting your CSS and seeing what element is modified?

Hi Andrew, thanks for your efforts.

I inspected it using Chrome Developer Tools and see, being that it was built as responsive, the vertical scroll appears when you close the browser window at 986px however when you open it wider to anything higher than 979px it disappears.

Further the CSS Rules change from the 979px Bootstrap.responsive.css, to bootstrap.css, which is when the vertical scroll disappears on the right. Assuming it has something to do with the bootstrap.css, needing to assign a second value for responsive.css beyond 979?

I also notice it has something to do with the navbar being fixed. Here's the responsive.css

bootstrap.responsive.css: <p>@media (max-width: 979px) and (min-width: 768px) .container, .navbar-static-top .container, .navbar-fixed-top .container, .navbar-fixed-bottom .container { width: 724px;</p>

Appreciate any ideas you might have, Chris

Ha, found it!

I deleted: "navbar-form pull-right" while deleting an email address and sign-in form which I wanted taken out. This went with it. Thanks for the troubleshoot Andrew I appreciate it.

Chris

Zac Gordon
STAFF
Zac Gordon
Treehouse Guest Teacher

Hey Chris! Glad to hear you got the problem figured out :) Good CSS detective work there!