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!
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
Chris Hobson
Courses Plus Student 267 PointsLoaded 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
Andrew Whitfield
5,239 PointsDo you have a link?
Chris Hobson
Courses Plus Student 267 Pointsi'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
Andrew Whitfield
5,239 PointsHi 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?
Chris Hobson
Courses Plus Student 267 PointsHi 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
Chris Hobson
Courses Plus Student 267 PointsHa, 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
Treehouse Guest TeacherHey Chris! Glad to hear you got the problem figured out :) Good CSS detective work there!