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
Misty Majewski
5,276 PointsMedia Query
The question states.. 'Inside the media query, select the list items inside the gallery and add a width of 28.3333%."
I then wrote: @media screen and (min-width: 480px) { #gallery li { width: 28.3333%; } }
I have checked and double checked but cannot figure out what I am doing wrong.. Can anyone tell me why the challenge does not accept my answer?
It keeps saying Bummer! Be sure to set the width of gallery list items to 28.3333% when the browser is wider than 480px...
Nurul Ahsan
2,039 PointsI have done the same but does not accept it. It keeps saying Bummer! Be sure to set the width of gallery list items to 28.3333% when the browser is wider than 480px...
18 Answers
Daniel Hurd
12,987 PointsRichmond is correct about the media code already being written. However, for me it appeared at the bottom, not at the top.
Richmond Lauman
28,793 PointsIt appeared at the bottom for me too. I don't think I specified where it appeared, just that it was there.
Richmond Lauman
28,793 PointsHi Misty.
Your code looks right, so I tried the challenge with the following code and it passed:
@media screen and (min-width: 480px) {
#gallery li {width: 28.3333%;}
}
Your code seems to be the same, so I cannot say why it is not working for you.
Richmond Lauman
28,793 PointsThe @medi code should already be written. In fact they have the following pre-written for the challenge:
@media screen and (min-width: 480px) {
}
You only need to add the #gallery li {width: 28.3333%;} within the query that is already there.
Ajay Maheshwari
Courses Plus Student 6,423 Points@media screen and (min-width: 480px) {
#gallery li {max-width: 28.3333%;}
}
Use this one may be it will solve your question
Laif Kirkpatrick
902 PointsThis worked for me
Misty Majewski
5,276 PointsNo I have it on several lines like he does in the video.. I will try again though
Misty Majewski
5,276 PointsI am so frustrated.. Is there certain place that you but the @media in the test.. I tried several spots and I even wrote it exactly like you did.. It will not allow me to pass.. I don't want to skip it, but I may not have a choice.I am soo confused.. Thank you though for your help..
Misty Majewski
5,276 PointsThanks.. Had no clue that was at the bottom.. I scrolled down a few times but didn't see it so I thought I needed to write the whole code.. I finally passed!! YEAH!!
philip cartlidge
Courses Plus Student 4,032 Pointsi cant get through either ... @media screen and (min-width: 480px) {
gallery li {width: 28.3333%;
}
can you help
Misty Majewski
5,276 PointsPhilip.. One thing I notice is that you do not have 2 sets of brackets at the end, only one. The other thing is the gallery is actually #gallery. The pound sign makes a big difference. The @media screen and (min-width:480) is already written for you. So you only have to write { #gallery li {width:28.3333%}}
Misty Majewski
5,276 PointsRichmond Lauman gives a good example a few comments up.
Daniel Hurd
12,987 PointsPhillip -
After you make the corrections that Misty pointed out, if you're still having trouble double check the following:
Read through Richmond's answer
Scroll through your style sheet to the bottom, to make sure you find the @media, as it's already written for you.
When I got stuck on this answer, I didn't realize that I only needed to add the gallery id and its declarations to the @media query.
Hope you get through this one!
David Peraza
1,929 PointsI'm having the same issue were you able to solve it ?
Ajay Maheshwari
Courses Plus Student 6,423 Pointscopy and post your error message
David Peraza
1,929 Pointsgallery li {
width: 28.3333%;
}
Ajay Maheshwari
Courses Plus Student 6,423 Pointsuse this code may be it solve your issue
@media screen and (min-width: 480px) {
#gallery li {max-width: 28.3333%;}
}
David Peraza
1,929 Pointssolved it thanks worked had an extra space in one of the breaks i guess. was driving me nuts ty.
MUZ140526 Alex Mawene
2,687 Points@media screen and (min-width:480px) { #gallery li{ width:28.3333%; }
Sean Clipsham
1,664 PointsI was staring right at it, but I finally saw it. I was forgetting to put my % sign in.
Rolando Ponce de León
9,585 PointsRolando Ponce de León
9,585 PointsI see your code is all in one line, is that exactly how you are writing it in the code challenge editor?... The reason I ask this is because I think it once happened to me that my code didn't pass because it had no line breaks.