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 cheryltrykv
cheryltrykv
1,572 Points

How to clear left side of 4th list item with "gallery" using nth-child pseudo selector?

.galler li:nth-child(4) { 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.333%;
  }

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

}

3 Answers

Jacob Mishkin
Jacob Mishkin
23,118 Points

Hey you are really close, But what you are doing is calling only the 4th element, what you need to do is add the "n" to the number 4:

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

Here is a really good explanation from the blog below:

"Let's get back to the "3n+3" from the original example though. How does that work? Why does it select every third element? The trick is understanding the "n" and algebraic expression that represents. Think of "n" as starting at zero and then a set of all positive integers. Then complete the expression. So the 3n is "3xn..."

https://css-tricks.com/how-nth-child-works/

if you want to know more, I highly recommend giving this a read.

cheryltrykv
cheryltrykv
1,572 Points

Good stuff. Thanks.

Jacob Mishkin
Jacob Mishkin
23,118 Points

Not a problem, any time!

sizwengubane
sizwengubane
15,244 Points
sizwengubane
sizwengubane
15,244 Points

This is the complete answer to the challenge please rate my answer as the best if this works for u <blockquotes>

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

</blockquotes>

cheryltrykv
cheryltrykv
1,572 Points
cheryltrykv
cheryltrykv
1,572 Points

Lakindu, thank you.

sizwengubane
sizwengubane
15,244 Points

sure thing bro please select my answer as the best