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

Daniel Pelaez
Daniel Pelaez
2,757 Points
Posted by Daniel Pelaez
Daniel Pelaez
2,757 Points

How to Make a Website: Clear a left float within a media query

the challenge is: inside the media query, clear the left side of every 4th list item in the gallery.

my answer is:

@media secreen and (min-width:480px) {
    #gallery li {
         width:28.3333%;
      }
#gallery li: nth-child (4n) {
    clear: left;
     }

i can not see what am i doing wrong. can anybody help me?

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;
  }

}
Jesus Mendoza
Jesus Mendoza
23,289 Points
Jesus Mendoza
Jesus Mendoza
23,289 Points

Remove the n from 4n!

1 Answer

mikes02
mikes02
Courses Plus Student 16,968 Points

Jesus and Nolan,

Thank you both for answering, it's greatly appreciated. However, rather than just posting the answer it would be far more beneficial to the original poster, and other members who may have the same question, if you could please explain why your answer works. Also, both of your answers are actually incorrect, you would not remove the 'n' if you want to target every 4th element, you would in fact leave the 'n' if that were the case, if you had just 4 by itself it would only target the 4th element alone. I believe the spacing between the semi-colon, pseudo class and value is actually what is causing the code to fail, the correct answer would be:

@media screen and (min-width: 480px) {
  #gallery li { 
    width: 28.3333%; 
  }
  #gallery li:nth-child(4n) {
    clear: left; 
  }
}

Daniel - On your original post I modified it a bit to fix the code formatting and also modify the title to be more descriptive and helpful to other forum members.

huckleberry
huckleberry
14,636 Points
huckleberry
huckleberry
14,636 Points

Thank you both for answering, it's greatly appreciated. However, rather than just posting the answer it would be far more beneficial to the original poster, and other members who may have the same question, if you could please explain why you answer works.

I love you.

mikes02
mikes02
Courses Plus Student 16,968 Points

Thank you Huckleberry, I love you too :)

Daniel Pelaez
Daniel Pelaez
2,757 Points
Daniel Pelaez
Daniel Pelaez
2,757 Points

Thanks Mikes02 great explanation!!!