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

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.