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 Livvy Reece
Livvy Reece
1,649 Points

Inside the media query, clear the left side of every 4th item in the gallery

please help!

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) {

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

I am not understanding what i did wrong

3 Answers

Sanjay Tailor
Sanjay Tailor
8,443 Points
Sanjay Tailor
Sanjay Tailor
8,443 Points

For this challenge try following:

@media screen and (min-width: 480px) {
  #gallery li {
    width: 28.3333%
  }
}
Justin Kraft
Justin Kraft
26,327 Points
Justin Kraft
Justin Kraft
26,327 Points

Hello Livvy,

Check your curly braces. If you eliminate the one curly brace under the first #gallery id selector it should fix this problem.

mikes02
PLUS
mikes02
Courses Plus Student 16,968 Points
mikes02
mikes02
Courses Plus Student 16,968 Points

You have duplicate calls to the same media query and your nth-child pseudo class is not within the media query at all, let's look at how that can be addressed:

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

You are actually on the right track, you just need to make sure that you keep a close eye on your closing brackets, especially in media queries, since you are nesting CSS within them. Give that a try and it should solve your problem.