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

Katherine Bui
Katherine Bui
3,404 Points
Posted by Katherine Bui
Katherine Bui
3,404 Points

What am I doing wrong?

At the bottom of this CSS file is a media query. Inside the media query, create a selector that chooses all list items that are nested inside the element with the id of "gallery". Then, inside your newly written selector, set the width property to a value of 28.3333%.

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

}

My code is still being rejected. What am I doing wrong?

  • Note - code is placed at the bottom.

6 Answers

Austin Whipple
Austin Whipple
29,725 Points
Austin Whipple
Austin Whipple
29,725 Points

Your code should most likely work. However, I'm guessing you may have put it at the top of the CSS file rather than the end?

The code checker can throw errors based on things like formatting and code placement. Check out this conversation for more info.

Katherine Bui
Katherine Bui
3,404 Points
Katherine Bui
Katherine Bui
3,404 Points

Thanks! But I tried to place it at the top of the CSS file and it still won't work.

Katherine Bui
Katherine Bui
3,404 Points
Katherine Bui
Katherine Bui
3,404 Points

Opps! I thought you meant it as- try to place it at the top. The original code is placed at the bottom and it doesn't work!

Austin Whipple
Austin Whipple
29,725 Points
Austin Whipple
Austin Whipple
29,725 Points

I'd double check your formatting, closing brackets, etc., as well. In the whole file, not just the code block you're editing. The code below should work to select all list items in the element with an id of gallery.

@media screen and (min-width: 480px) { 
    #gallery li { 
        width: 28.3333%; 
    }
}
Robert Manolis
STAFF
Robert Manolis
Treehouse Guest Teacher
Robert Manolis
Robert Manolis
Treehouse Guest Teacher

Hi Katherine,

That looks right. Maybe there is an error else where. If you post all the code, I'd be happy to check it for you. Also, check out the "Markdown Cheatsheet" link above the "Post answer" button below. It will tell you a couple of tricks for formatting code here. :)

Katherine Bui
Katherine Bui
3,404 Points
Katherine Bui
Katherine Bui
3,404 Points

I literally copied and pasted the code and it didn't work. I guess I should email support now.

Austin Whipple
Austin Whipple
29,725 Points
Austin Whipple
Austin Whipple
29,725 Points

Try this full code block (replacing everything in the challenge window):

a {
  text-decoration: none;
}

#wrapper {
  max-width: 940px;
  margin: 0 auto;
}

#logo {
  text-align: center;
  margin: 0;
}

h1, h2 {
  color: #fff;
}

nav a {
  color: #fff;
}

nav a:hover {
  color: #32673f;
}

h1 {
  font-family: Changa One, sans-serif;
  font-size: 1.75em;
  font-weight: normal;
}

img {
  max-width: 100%;
}

#gallery {
  margin: 0;
  padding: 0;
  list-style: none;
}

#gallery li {
  float: left;
  width: 45%;
  margin: 2.5%;
  background-color: #f5f5f5;
  color: #bdc3c7;
}

nav ul {
  list-style: none;
  margin: 0 10px;
  padding: 0;
}

nav li {
  display: inline-block;
}

nav a {
  font-weight: 800;
  padding: 15px 10px;
}

.profile-photo {
  display: block;
  margin: 0 auto 30px;
      max-width: 150px;
  border-radius: 100%;
}

.contact-info {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 0.9em;
}

.contact-info a {
  display: block;
  min-height: 20px;
  background-repeat: no-repeat;
  background-size: 20px 20px;
  padding: 0 0 0 30px;
  margin: 0 0 10px;
}

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

Looks like you might not be the only one that has been having trouble with this challenge!

Katherine Bui
Katherine Bui
3,404 Points
Katherine Bui
Katherine Bui
3,404 Points

Nope, still rejected! :(

Austin Whipple
Austin Whipple
29,725 Points
Austin Whipple
Austin Whipple
29,725 Points

Hmmm, yeah. There seem to be a lot of people posting about this particular challenge. Hopefully support will be able to provide an answer!

Katherine Bui
Katherine Bui
3,404 Points
Katherine Bui
Katherine Bui
3,404 Points

Thank you for your help!

Stuart McPherson
Stuart McPherson
15,939 Points
Stuart McPherson
Stuart McPherson
15,939 Points

Hey, I've used this gallery code in other projects to get the panelled box structure. I've used

responsive.css 
@media screen and (max-width: 760px) {
     #gallery li {
       width: 40%;
     }
  }

And it works. Just changed it to 'min-width' as you have used and then my structure didn't change responsively. so maybe try changing it to 'max-width'.

If that doesn't work I would check where you've set the id up in the html.

I believe it should be like the following:

index.html 
<div>
      <section id="gallery">
        <ul>
          <li>
            <a href="img/numbers-01.jpg">
              <img src="img/numbers-01.jpg" alt="">
              <p>Experimentation with colour and texture</p>
            </a>
          </li>