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 april
april
690 Points

Getting a Bummer: Be sure you are only setting the width for every 4th list item.

There is a correction on this lesson and I input the corrected code. Have I done anything else incorrectly?

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;
}


}
april
april
690 Points

Thank you so much Austin !!! I gotta get this semicolon thing down pat. So many times it has tripped me up. I just do not understand when I need one and when I do not; and, then there are all the times I have just forgotten the semicolon at the end of something. Thanks again!

Austin Whipple
Austin Whipple
29,725 Points
Austin Whipple
Austin Whipple
29,725 Points

In CSS, semicolons are only ever used at the end of a rule declaration, so it goes:

   property: value;

You shouldn't see them anywhere else. Some also say you can remove the semicolon from the last rule in a block of CSS. While valid, I'd recommend against it because it's a bit lazy and invites errors down the road.

april
april
690 Points

Thanks for the semicolon lesson - I have copied and pasted it into my notes. I also agree with your lazy comment. I would rather just do it one way all the time.

1 Answer

Austin Whipple
Austin Whipple
29,725 Points
Austin Whipple
Austin Whipple
29,725 Points

It looks like you may be missing a bracket between the #gallery li rules and the #gallery li:nth-child rules.

Give this a shot:

@media screen and (min-width: 480px) {
     #gallery li {
          width: 28.3333%;
     }
     #gallery li:nth-child(3n+1) {
         clear: left;
     }
}
april
april
690 Points

It still does not work. I tried putting in the (4n) and that did not work.

I had to start all over several times.

Austin Whipple
Austin Whipple
29,725 Points
Austin Whipple
Austin Whipple
29,725 Points

So I just tried out the challenge and in addition to the bracket issue, the (4n) should do it. Try placing this code:

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

(Looks like there was also a rogue semicolon in my first example that I forgot to remove.)