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

Joel Lithgow
Joel Lithgow
7,414 Points

The Test "Responsive Web Design and Testing" my code (which is correct) isn't working.

Can someone tell me what went wrong with this code? (the test asks me to clear every 4th image in the list to left)

@media screen and (min-width: 480px) {
  #gallery li {
    width: 28.3333%;
  }
  #gallery li:nth-child (3n+1) {
        clear: left;
    }
}
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 (3n+1) {
        clear: left;
    }
}

1 Answer

Lin Lu
Lin Lu
29,171 Points

Hi,

You are right actually. I just noticed that the code in the video is not correct and below the video, in Teacher's Notes section, you can find the code correction.

Code Correction

In this video, the selector :nth-child(4n) is used to correct a responsive issue on every 4th item. In other words, this will select the 4th item, 8th item, 12th item, and so on. This fixes the specific problem in the video, but if more gallery items are added beyond the 5 that are present in this project, the design will start to break again. That's because there are 3 items in each row, and every 4th item could appear at the beginning, middle, or end of a row.

Instead, we want to select the first item in each row. A more robust solution is to use the selector :nth-child(3n + 1) instead. This will select every 3rd item plus 1. In other words, this will select the 4th item, 7th item, 10th item, and so on.

Hope that helps!

Joel Lithgow
Joel Lithgow
7,414 Points

Thanks, but I have put both types of code into the test that follows that lesson, but with still no luck it still claims I am wrong.

Lin Lu
Lin Lu
29,171 Points

There's a whitespace between the "nth-child" and the opening parenthesis, I think that caused the problem.

Joel Lithgow
Joel Lithgow
7,414 Points

Ok thanks I'll try that out in about 10min and tel you how that works out.

Hi Joel,

You have a space after nth-child which should be removed.

Also, the instructions say to clear every 4th child so you'll want to go back to what was in the video and use 4n

This will clear every 4th child. The updated code 3n + 1 is correct for the website project but it does not meet the requirements of the challenge for clearing every 4th child. 3n + 1 will clear every 3rd child starting with the 1st.

Joel Lithgow
Joel Lithgow
7,414 Points

I have tried both thinking that was the case but I'll get rid of that space and get back to you.