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

HTML How to Make a Website Responsive Web Design and Testing Refactor the Layout

Misty Majewski
Misty Majewski
5,276 Points

Media 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...

Rolando Ponce de León
Rolando Ponce de León
9,585 Points

I 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.

I 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...

nurulahsan@gmail.com

18 Answers

Richmond is correct about the media code already being written. However, for me it appeared at the bottom, not at the top.

Richmond Lauman
Richmond Lauman
28,793 Points

It appeared at the bottom for me too. I don't think I specified where it appeared, just that it was there.

Richmond Lauman
Richmond Lauman
28,793 Points

Hi 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
Richmond Lauman
28,793 Points

The @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.

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

Use this one may be it will solve your question

This worked for me

Misty Majewski
Misty Majewski
5,276 Points

No I have it on several lines like he does in the video.. I will try again though

Misty Majewski
Misty Majewski
5,276 Points

I 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
Misty Majewski
5,276 Points

Thanks.. 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
PLUS
philip cartlidge
Courses Plus Student 4,032 Points

i cant get through either ... @media screen and (min-width: 480px) {

gallery li {width: 28.3333%;

}

can you help

Misty Majewski
Misty Majewski
5,276 Points

Philip.. 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
Misty Majewski
5,276 Points

Richmond Lauman gives a good example a few comments up.

Phillip -

After you make the corrections that Misty pointed out, if you're still having trouble double check the following:

  1. Read through Richmond's answer

  2. 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
David Peraza
1,929 Points

I'm having the same issue were you able to solve it ?

copy and post your error message

David Peraza
David Peraza
1,929 Points

gallery li {

width: 28.3333%;

}

use this code may be it solve your issue

@media screen and (min-width: 480px) {
  #gallery li {max-width: 28.3333%;}
}
David Peraza
David Peraza
1,929 Points

solved it thanks worked had an extra space in one of the breaks i guess. was driving me nuts ty.

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

I was staring right at it, but I finally saw it. I was forgetting to put my % sign in.