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

Posted by Robert Lum
Robert Lum
762 Points

How to Make a Website? HTML challenge question

How to Make a Website? HTML challenge question - challenge task 1 of 2.

Q: Inside the media query, select the list items inside the gallery and add a width of 28.3333%. My answer: inside the css/main.css screen, I added:

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

and pressed the "Check Work" button. The screen came back with: "Bummer! Be sure to set the width of gallery list items to 28.3333% when the browser is wider than 480px."

I would like a resolution to this problem before I proceed to the next step.

The link to this problem is: https://teamtreehouse.com/library/refactor-the-layout

I was not able to get a screen shot. Thanks

Ted Sumner
Ted Sumner
Courses Plus Student 17,967 Points

modified to format code

4 Answers

Ted Sumner
Ted Sumner
Courses Plus Student 17,967 Points

You need to enclose the code subject to the media query in {}.

Robert Lum
Robert Lum
762 Points

You mean like this? @media {screen and (min-width: 480px)}

gallery li {width: 28.3333%}

I tried it and still got the same bummer! response. Could you give me the exact syntax they need?

Ted Sumner
Ted Sumner
Courses Plus Student 17,967 Points

Like this:

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

Ted, that seemed to work OK. ...Thanks a million....

Ted Sumner
Ted Sumner
Courses Plus Student 17,967 Points

Any time.

Ted Sumner
PLUS
Ted Sumner
Courses Plus Student 17,967 Points
Ted Sumner
Ted Sumner
Courses Plus Student 17,967 Points

This code passes:

@media screen and (min-width: 480px) {
  #gallery li {
    width: 28.3333%;
  }
}
Luis Francisco Nogueira Vieira de Vasconcelos
Luis Francisco Nogueira Vieira de Vasconcelos
9,977 Points
Luis Francisco Nogueira Vieira de Vasconcelos
Luis Francisco Nogueira Vieira de Vasconcelos
9,977 Points

But the exercise already gives the media query.

In the end of the document, you can see:

@media screen and (min-width: 480px) {

}

right?

So you only need to get the list items (LI) from #gallery and change the width.

Ted Sumner
Ted Sumner
Courses Plus Student 17,967 Points

Yes, you add it between the {}. The quote above does not have the code enclosed in {}.

Robert Lum
Robert Lum
762 Points

I added the following as noted in the course work, but the screen still gives me a bummer response.

gallery li {width: 28.3333%}

Luis Francisco Nogueira Vieira de Vasconcelos
Luis Francisco Nogueira Vieira de Vasconcelos
9,977 Points
Luis Francisco Nogueira Vieira de Vasconcelos
Luis Francisco Nogueira Vieira de Vasconcelos
9,977 Points

you have to point that "gallery" is an ID, so you add "#" before the name, like this: "#gallery"

Robert Lum
Robert Lum
762 Points

Luis, thanks for the tips. I have the correct answer from another reviewer.