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
Eve L.
Courses Plus Student 9,023 PointsMedia 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
Jason Anello
Courses Plus Student 94,610 PointsHi 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.
Nurul Ahsan
2,039 PointsHi Eve,
just add max-with like as:
@media screen and (min-width:480px){
#gallery li{
max-width: 28.3333%;
}
}
Zahscha Gonzalez
27,775 PointsTry using
@media screen and (min-width: 481px){ #gallery li{ width: 28.3333%; } }
Hope that helps.
Eve L.
Courses Plus Student 9,023 PointsThanks, good thought! But it's still not passing.
Zahscha Gonzalez
27,775 PointsYour 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.
eck
43,038 PointsLooking at this I have two ideas about what could be wrong:
- the min-width needs to be wider than 480px, so try using 481px instead to see if that helps
- 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.
Courses Plus Student 9,023 PointsJason was right. I didn't see the empty query at the bottom. The code was correct. Thanks everybody!
Jason Anello
Courses Plus Student 94,610 PointsI 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.
Courses Plus Student 9,023 PointsJason,
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