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 Prince Mutimbanyoka
Prince Mutimbanyoka
753 Points

help

Inside the media query, clear the left side of every 4th list item in the 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 4n{
   clear:left;
 }

1 Answer

Marcus Parsons
Marcus Parsons
15,719 Points

Hey Prince,

You are very close with your code! ":nth-child" should be directly beside "li" and then right beside of that should be (4n) in parenthesis like so:

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

Thanks! I deleted my post so as not to be confusing. But I appreciate the heads up :)

Marcus Parsons
Marcus Parsons
15,719 Points

No problem, Andy. Honestly, I really hate doing that to someone's code, and I wish there was a direct message feature on here, because I would have privately sent you a message about it. I feel like sometimes it comes off as someone being called out publicly for a mistake, you know? Thanks for being understanding! :)