3 columns aren't re-arranging as 2 columns in small screen.

Solved! The 3 column code was sitting outside of the media query braces. Thanks Jason!

Matthew Largent, Jason Anello — can you explain where that media query is? Apologies if I should I open a new post for this question, but it's the exact same question as Matthew's and if I knew where the media query was, I can fix it also. Thanks!

Hi Gina, Just to make sure we're on the same page, this issue came up when I was learning the track "Web Design", course "How to Make a Website", the 8th class called "Responsive Web Design and Testing", video "Build a Three Column Layout".
In the video just before that one, which is "Adding Breakpoints for Devices", it had you make a file called responsive.css. Eventually through the course you'll have two media queries, though your 2-to-3 column code will be in the uppermost one, beginning with "@media screen and (min-width: 480px) { }". Inside those curly braces should be the code which I'll paste here:

/******************
PAGE: PORTFOLIO
******************/

#gallery li {
  width: 28.3333%
}

#gallery li:nth-child(4n) {
  clear: left;
}

Also, I just learned now that if too many tabs are open in Chrome, it won't allow the screen to get small enough to reach the breakpoint where 3 columns collapse into 2. It was a little frustrating before I realized it wasn't my code that was the problem this time.

Thanks so much for the reply, Matthew Largent! That is frustrating — I use Chrome also!

So my code is a bit different, but on purpose: If you look at the "Teacher's Notes" in the page for that course (same as the one you were talking about) you'll see that Nick Pettit said that there was a fix to the code http://teamtreehouse.com/library/how-to-make-a-website/responsive-web-design-and-testing/build-a-three-column-layout

Supposedly the code doesn't work as shown in the video if there are more than those 5 images that were provided to us added to the page. My page will have more than five, so I decided to use the code that was supposed to be more correct/robust.

Now I'm wondering if the updated code is the reason I'm not getting it down to 2 columns when it's resized, since I took your advice and made my test site its own window so it wasn't competing with tabs...

Now I feel really lost!

You got it Jason Anello! The orange was working, so I knew I had the right size, so it had to be the media queries. It was that the "}" for both the 480 and 660 media queries weren't surrounding the code they were supposed to cover, which I didn't know they had to do. I'm surprised I missed both of those — I usually am off because of a typo, not a big mistake like that since I am following along word-for-word! Sheesh.

This means you actually fixed two problems; this one as well as what was going on over here: https://teamtreehouse.com/forum/struggling-on-this-one-nav-lis-fall-under-each-other-logo-area-is-way-up-high-still

Hey Jason Anello,

Sorry to open this back up, but just saw that it's doing the same thing in Firefox that I described here (I was in Chrome before, where it works perfectly) — but it only does it for a split second as I'm sizing — you know unless I find the exact size where it's breaking strangely. I'm not sure how to find that exact size where the link is falling under in the navigation, but do you know why it might be doing it in Firefox and not in Chrome? I know each browser has its differences.