Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

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

Posted by Christopher Dayley
Christopher Dayley
1,236 Points

Image gallery not changing to two column layout

Hi,

My image gallery is not changing to a two column layout when browser window is smaller than 480px after applying responsive.css. Instead, it stays as three columns my code in responsive.css is the same as in the video so I do not understand why it is not working. Thanks for the help.

Chris

Christopher Dayley
Christopher Dayley
1,236 Points

Nevermind... I found the problem.

1 Answer

Sebastian Sirb
Sebastian Sirb
4,436 Points
Sebastian Sirb
Sebastian Sirb
4,436 Points

If anyone else is experiencing the same thing (which I was), make sure the following section is INSIDE the @media screen and over 480 px:

gallery li { width: 28.3333%; }

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

I had accidentally typed it outside, and obviously the browser was giving a 28.3# width for an image regardless of screen width.

Cheers, Sebastian

Patricia Snyder
Patricia Snyder
5,563 Points
Patricia Snyder
Patricia Snyder
5,563 Points

Thank you!!! I had the exact same problem.