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 Adjust the Profile Page and Header

Posted by Breon Waters II
Breon Waters II
4,076 Points

Issues with showing 2 and 3 column layout

I followed along with the video but my media queries aren't working properly. For the gallery images, it's showing the 3 column look no matter the browser width. Also, the changes for the header at larger sizes isn't taking effect either.

I'm sure it's something small that I'm overlooking.

Any help or suggestions would be greatly appreciated.

5 Answers

nostrodev
nostrodev
7,067 Points

user this @media screen and (min-width:480px) { #gallery { width:30%; } }

nostrodev
nostrodev
7,067 Points
nostrodev
nostrodev
7,067 Points

use this like for the gallery if you want for the mobile website 2 column @media screen and (min-width:480px) { #gallery li { width:45%; } }

Breon Waters II
Breon Waters II
4,076 Points
Breon Waters II
Breon Waters II
4,076 Points

Thanks for replying Nostro Dev.

When I made the #gallery li width 45% it changed the layout to 2 column for mobile but it keeps it as 2 columns for every browser size. Do you know how I can get 2 columns just for mobile and have it switch to 3 columns for larger sizes?

Breon Waters II
Breon Waters II
4,076 Points
Breon Waters II
Breon Waters II
4,076 Points

Thanks Nostro Dev

Breon Waters II
Breon Waters II
4,076 Points
Breon Waters II
Breon Waters II
4,076 Points

My CSS wasn't working properly because I had an extra closing bracket for # secretary it looked like this:

#secondary { width: 40%; float: right; }

)

Thanks for taking the time to help Nostro Dev!