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

General Discussion

Posted by Brendan O'Brien
Brendan O'Brien
9,066 Points

bootstrap .container jumps around

Hi there everyone,

I'm using bootstrap on this site and there is some strange behaviour with the .container class. When I use a jumbotron on a page the .container seems to take a different width than on pages without a .jumbotron. I can't figure out why...

Here is the page: www.shaynewoodsmith.com/development

Adam Sackfield
Adam Sackfield
Courses Plus Student 19,663 Points

The container appears to be the same size regardless of the .jumbotron. 1170px

Brendan O'Brien
Brendan O'Brien
9,066 Points

Sorry, here is another link:

http://www.shaynewoodsmith.com/development/shorts/uncomfortablesilence.html

on that page I didn't use .jumbotron and the .container class seems to be wider than all the pages without.

Adam Sackfield
Adam Sackfield
Courses Plus Student 19,663 Points

Still the same on my screen if you right click on the page in google chrome and select inspect element then you can use the inspector at the bottom to highlight each container and the size will show up on mine its 1170px

Brendan O'Brien
Brendan O'Brien
9,066 Points

Ah I see...

I'm thinking now it has something to do with the media queries. when your browser window falls above a media query break it's fine... but when you are close to one and the jumbotron drops down to its smaller size, the page I linked doesn't drop down.

1 Answer

Brendan O'Brien
Brendan O'Brien
9,066 Points
Brendan O'Brien
Brendan O'Brien
9,066 Points

TL;DR: Problem solved

Okay, I was blind. What was happening... in case anyone happens upon this and wonders what I was talking about... the scroll bars of the browser affect the window size, so on pages that don't scroll they seemed to be not following the same media queries as the other pages... they actually are but the scroll bar was making the pages thinner than ones without.