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

HTML How to Make a Website Responsive Web Design and Testing Build a Three Column Layout

Rebecca Sayre
Rebecca Sayre
736 Points
Posted by Rebecca Sayre
Rebecca Sayre
736 Points

After doing the steps to change the responsiveness of the gallery page, it no longer sizes down to two columns when it

Everything was following along when he walked us through creating the two column layout for the contact page. It resized as it should. Then he made an slight comment about needing to make similar adjustments to the gallery page, but rather then doing that, he moved on to doing it in the responsive.css page with the #gallery parts. I followed along thinking that they would affect the index.html page since they had the #gallery in them.

Everything looks good, but when he shows the example of what his page looks like, at the end of this video, his still will revert to a two column layout when it goes down into mobile range. It will then resize to 3 columns when it gets bigger.

Mine doesn't do that. It stays at three columns and just makes everything smaller for the smaller, mobile sizing.

What did I miss?

I've re-watched the video 3 times and I don't want to move forward and build upon possible incorrect code.

1 Answer

Robert Cooper
Robert Cooper
22,704 Points
Robert Cooper
Robert Cooper
22,704 Points

My best guess would be that your #gallery li:nth-child(4n) selector is outside of your media query (possible in your main.css).

If you could post your code using markdown, I could take a look at your code and see if I can figure anything out!

Rebecca Sayre
Rebecca Sayre
736 Points
Rebecca Sayre
Rebecca Sayre
736 Points

Good afternoon, Robert. I do appreciate you taking the time to respond to my question.

My css was not in the main.css file but in the responsive.css file, instead.

As it turns out, you were right about the nth-child part being outside of the media query. I didn't realize it, but it was apparently on the wrong side of the closing curly brace. :)

I looked at that code for a good 30 minutes trying to figure out what I had done wrong, and didn't see it. It wasn't until I stepped away, for a while, and then saw your comment, that it helped me to realize where I had gone wrong.

So thank you. I really do appreciate it.

Your help was invaluable.