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

julia dearden
julia dearden
691 Points
Posted by julia dearden
julia dearden
691 Points

I keep on getting errors on my code—please help!

I keep on getting errors on the code challenge that states: "Now, clear the left side of every 4th list item in the element with the id of "gallery". Here's a hint: You'll need to write another selector inside of the media query at the bottom of the file, in addition to the one you wrote in the previous step. You'll also need to use the nth-child pseudo selector." I've looked at others' answers and have tried every little adjustment on my code, but I can't seem to find what's wrong with it. Please help!

css/main.css 
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 {
    max-width: 28.3333%;
  }
  #gallery li:nth-chi1d(4n) {
     clear: left;
  }
}

1 Answer

Benjamin Larson
Benjamin Larson
34,055 Points
Benjamin Larson
Benjamin Larson
34,055 Points

Look like you have child spelled as chi1d, which is actually quite difficult to see in the code editor.

  #gallery li:nth-child(4n) {
     clear: left;
  }

Thanks for providing my confusing puzzle for the day haha

Chris Thomas
.a{fill-rule:evenodd;}techdegree seal-36
Chris Thomas
Front End Web Development Techdegree Graduate 34,909 Points

Wow I was going back and forth trying to find the difference. That was tough to see!

Also, just to note, part 1 of the challenge states to set the width property not the max-width property. Both pass just fine but understand they're not the same thing.

julia dearden
julia dearden
691 Points
julia dearden
julia dearden
691 Points

Haha not sure how I managed that one... thank you!!

Balal Naeem
Balal Naeem
7,418 Points
Balal Naeem
Balal Naeem
7,418 Points

How did you figure this out LOL

Benjamin Larson
Benjamin Larson
34,055 Points
Benjamin Larson
Benjamin Larson
34,055 Points

Balal Naeem I can't remember if I picked this one up after a couple close scans or if I resorted to "cheating" by using software that detects differences in text and compared it against my passing solution.

The more interesting question is how julia "managed that one", as she said. Typos are certainly not uncommon, but 'l' and '1' aren't close in proximity and I'm not sure what mental process or muscle memory would take your finger that far out of the way haha. But then again, I can easily get distracted by thinking about what's in the fridge and suddenly I've written several lines of code in the wrong programming language.