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 Refactor the Layout

Eve L.
PLUS
Eve L.
Courses Plus Student 9,023 Points

Media Query, Setting Width

The task: Challenge task 1 of 2 Inside the media query, select the list items inside the gallery and add a width of 28.3333%.

The response: Bummer! Be sure to set the width of gallery list items to 28.3333% when the browser is wider than 480px.

The code: @media screen and (min-width: 480px){ #gallery li{ width: 28.3333%; } }

I don't see the problem. Anyone?

7 Answers

Hi Eve,

There is no problem unless you've put it at the top.

There is already a media query set up for you at the bottom.

Hi Eve, just add max-with like as: @media screen and (min-width:480px){ #gallery li{
max-width: 28.3333%;

}

}

Try using

@media screen and (min-width: 481px){ #gallery li{ width: 28.3333%; } }

Hope that helps.

Eve L.
PLUS
Eve L.
Courses Plus Student 9,023 Points

Thanks, good thought! But it's still not passing.

Your code is correct actually, I just verified by trying to pass the code challenge myself. try refreshing the page or just empty the cache in your browser, it might just be a bug in the challenge.

Looking at this I have two ideas about what could be wrong:

  1. the min-width needs to be wider than 480px, so try using 481px instead to see if that helps
  2. my other thought is that gallery is a class instead of an id. If it is in fact an id then you selected it correctly, but if it is a class name use ".gallery li" instead.

Hope one of these works/helps!

Eve L.
PLUS
Eve L.
Courses Plus Student 9,023 Points

Jason was right. I didn't see the empty query at the bottom. The code was correct. Thanks everybody!

I don't know if you've realized this already but when you put it at the top then all the css below it that's outside the media query has a chance to override it. Part way down the css the list item width is set to 45% so you end up losing the 28.3333% width you set in the media query at the top.

Eve L.
PLUS
Eve L.
Courses Plus Student 9,023 Points

Jason,

Thanks. I have been using this as a refresher and wasn't really too concerned about the project as a whole. I was just trying to get through the individual exercises. I guess I'll have to pay a little more attention. Thanks again.

Eve