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 How to Make a Website Responsive Web Design and Testing Refactor the Layout

Posted by Yasir Ali
Yasir Ali
5,005 Points

I cleared side of every 4th list, but it said i didn't.

I cleared every side of the 4th list, but it states that i didn't . The instructions state, " Inside the media query, clear the left side of every 4th list item in the gallery." I did exactly this , the error states, " Bummer! Did you set "clear: left" on every fourth gallery list them?" Can someone please help.

Thank you

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 {
  width: 28.3333%;
  }

  #gallery li:nth-child (4n) {
    clear: left;
  }
Kirby Abogaa
Kirby Abogaa
3,058 Points
Kirby Abogaa
Kirby Abogaa
3,058 Points

Can you try to remove the space between nth-child and the parenthesis(). Maybe this will do the trick. Let me know if it works.

Yasir Ali
Yasir Ali
5,005 Points

No , it didnt work, thank you though.

Laksakan Krishnapillai
Laksakan Krishnapillai
6,390 Points
Laksakan Krishnapillai
Laksakan Krishnapillai
6,390 Points

Make Sure you keep the left bracket with no space after child then close bracket and space before applying the two open/close brackets.

Type in CSS

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

Hope this helps! - I had a similar error too when i encountered this challenge.

1 Answer

Raymond Sapida
Raymond Sapida
33,049 Points
Raymond Sapida
Raymond Sapida
33,049 Points

Hi there,

I'm not sure if it just got cut off on my screen, but it looks like there's a missing closing bracket for your media query.