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

Posted by Carl Trebino
Carl Trebino
3,919 Points

Can you help me understand this?

The question is occurring during a programming challenge. I do not understand the question that is being asked. The question is asking me to clear the left side of every fourth list with the id "gallery".

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 {
    clear: left;
  }
}

2 Answers

jcorum
jcorum
71,830 Points
jcorum
jcorum
71,830 Points

Close!

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

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

nth-child needs a 4n parameter here to get every 4th li

Carl Trebino
Carl Trebino
3,919 Points

I still don't understand what the element is doing; however, I ill drive on. Thanks for the help!

Ryan Dudley
Ryan Dudley
Treehouse Project Reviewer
Ryan Dudley
Ryan Dudley
Treehouse Project Reviewer

Just to help clarify Carl, as it's always good to know why things are happening!

Earlier in the css the gallery's list items (#gallery li) were floated to the left. Floats sort of "break out" of the normal page flow and cause other elements to wrap around them. In this example when the browser width gets narrow, and the image caption text starts wrapping to more lines, it "pushes" some of the elements in an undesirable way, causing some weird spacing issues.

We use the nth-child pseudo class to select every 4th list item (image) in the gallery. Since we are using a 3 column layout we want to be sure every 4th item is the start of a new row in our gallery, and we don't want it to be influenced by the previous floated elements. Since we floated to the left, we clear the left side to make sure it is does not try to wrap around the previous element.

Carl Trebino
Carl Trebino
3,919 Points
Carl Trebino
Carl Trebino
3,919 Points

Thank you very much for explaining that to me Ryan!