nth-child problem

Question

Hello everyone,

Glad to be here, it's such a wonderful place to learn. I am wondering if someone can help me with this nth-child selector? Just finished the first in the track course, Making Website and only thing which doesn't work is that when resizing window pictures are not showing correctly. I can't see where is wrong.

Here is code for responisve.css file:

@media screen and (min-width: 480px){
/*  TWO COLUMN LAYOUT*/

  #primary{
     width: 50%;
     float: left;
  }
  #secondary{
     width: 40%;
     float: right;
  }

/*  PAGE: PORTFOLIO*/
  #gallery li{
    width: 28.3333%;
  }

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

Sorry for bad formatting of code, I don't get it how to use ``` If someone can explain me I will be thankful Here is the screenshot Best regards to all community members!

Answer 1 · 2015-11-15T23:29:34Z

November 15, 2015 11:29pm

That removes entire 2nd picture.

Answer 2 · 2015-11-15T23:55:28Z

November 15, 2015 11:55pm

Hi Ivan,

can I see your HTML aswell please?

Regarding making a post:

1.Type three backticks followed by the language you're posting e.g. HTML

2.Post your code after this

3.Type another three backticks after your code.

Joe

Answer 3 · 2015-11-16T00:04:32Z

November 16, 2015 12:04am

Thanks. I entered like that but nothing happened. When I went to other computer in the house I saw that code is formatted. Probably some mod done that.

I'll try again, here is html, but, I compared it with treehousewebsite.com/index.html and it looks same to me.

<!DOCTYPE html>

<html>
  <head>
    <meta charset="utf-8">
    <title>Nick Pettit | Designer </title>
    <link rel="stylesheet" href="css/normalize.css">
    <link href='https://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400,400italic,700,700italic,800' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="css/main.css">
    <link rel="stylesheet" href="css/responsive.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
<body>
  <header>
    <a href="index.html" id="logo">
      <h1>Nick Pettit</h1>
      <h2>Designer</h2>
    </a>
    <nav>
      <ul >
        <li><a href="index.html" class="selected">Portfolio</a></li>  
        <li><a href="about.html">About</a></li>  
        <li><a href="contact.html">Contact</a></li>   
      </ul>
    </nav>
  </header>
  <div id="wrapper">
      <section>
        <ul id="gallery" >
          <li>
            <a href="img/numbers-01.jpg">
              <img src="img/numbers-01.jpg" alt="">
              <p>Experimentation with color and texture</p>
            </a>
          </li>
          <li>
            <a href="img/numbers-02.jpg">
              <img src="img/numbers-02.jpg" alt="">
              <p>Playing with blending</p>
            </a>
          </li>
          <li>
            <a href="img/numbers-06.jpg">
              <img src="img/numbers-06.jpg" alt="">
              <p>Trying to create </p>
            </a>
          </li>
          <li>
            <a href="img/numbers-09.jpg">
              <img src="img/numbers-09.jpg" alt="">
              <p>Creating shapes</p>
            </a>
          </li>
          <li>
            <a href="img/numbers-12.jpg">
              <img src="img/numbers-12.jpg" alt="">
              <p>Drips created</p>
            </a>
          </li>
        </ul>
      </section>
      <footer>
        <a href="http://twitter.com/KusakovicIvan"><img src="img/twitter-wrap.png" class="social-icon" alt="Twitter Logo"></a>
        <a href="http://facebook.com/zuricflavour" alt="Facebook Logo"><img src="img/facebook-wrap.png"  class="social-icon" alt="Facebook Logo"></a>
        <p>&copy; 2014 Nick Pettit</p>
      </footer>
    </div>
  </body>
</html>

Thank you very much

Answer 4 · 2015-11-16T00:20:29Z

November 16, 2015 12:20am

Hi Ivan,

sorry my fault can you send me the rest of your CSS so I can test it all together?

So was there code for 'main.css' too?

Thanks Joe

Answer 5 · 2015-11-16T08:33:01Z

November 16, 2015 8:33am

Dear Joe,

Nothing's fault.

Here's CSS, I was sleeping :)

/*GENERAL*/



#wrapper{
  max-width: 940px;
  margin: 0 auto;
  padding: 0 5%;
}

a{
  text-decoration: none;
}

img{
  max-width: 100%;
}

h3{
  margin: 0 0 1em 0;
}
/*HEADING*/

header {
  float: left;
  margin: 0 0 30px 0;  
  padding: 5px 0 0 0;
  width: 100%;
}

#logo{
  text-align: center;
  margin: 0;
}

h1{
  font-family: 'Changa One', sans-serif;
  margin: 15px 0;
  font-size: 1.75em;
  font-weight: normal;
  line-height: 0.8em;
}

h2{
  font-size: 0.75em;
  margin: -5px 0 0;
  font-weight: normal;
}

/* FOOTER */

footer {
  font-size: 0.75em;
  text-align: center;
  clear: both;
  padding-top: 50px;
  color: #ccc;
}

.social-icon{
  width: 20px;
  height: 20px;
  margin: 0 5px;
}

/*PAGE PORTFOLIO*/

#gallery {
  margin: 0;
  padding: 0;
  list-style: none;
}

#gallery li{
  float: left;
  width: 45%;
  margin: 2.5%;
  background-color: #f5f5f5;
  color: #bdc3c7;
}

#gallery li a p {
  margin: 0;
  padding: 5%;
  font-size: 0.75em;
  color: #bdc3c7;
}

/*PAGE ABOUT*/

.profile-photo{
  display: block;
  max-width: 150px;
  margin: 0 auto 30px;
  border-radius: 100%;
}

/*PAGE:CONTACT*/

.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;
}
.contact-info li.phone a{
  background-image: url('../img/phone.png');
 }
.contact-info li.mail a{
  background-image: url('../img/mail.png');
 }
.contact-info li.twitter a{
  background-image: url('../img/twitter.png');
 }
body {
  background-color: #fff;
  color: #999;
}

header {
  background: #6ab47b;
  border-color: #599a68;
}

nav{ 
  background: #599a68;
}

h1, h2 {
  color: #fff;
}

a{
    color: $6ab47b;
}

nav a, nav a:visited{
  color: #fff;
}

nav a.selected, nav a:hover{
  color: #32673f;
}


body{
  font-family: 'Open Sans', sans-serif;
}

/*NAVIGATION*/

nav {
  text-align: center;
  padding: 10px 0;
  margin: 20px 0 0;
}

nav ul {
  list-style: none;
  margin: 0;
  padding: 0;

}

nav li{
  display: inline-block;
}

nav a {
  font-weight: 800;
  padding: 15px 10px;
}

Answer 6 · 2015-11-16T20:35:53Z

November 16, 2015 8:35pm

Hi Ivan,

try replacing the #gallery li with this:

#gallery li {
    float: left;
    width: 45%;
    margin: 2.5%;
    background-color: #f5f5f5;
    color: #bdc3c7;
    min-height: 190px;

Answer 7 · 2015-11-16T20:39:45Z

November 16, 2015 8:39pm

then is first row picture 1 2 second row 6 ...then blank third row 9 and 12 when I resize window to the minimum width

Answer 8 · 2015-11-16T20:46:45Z

November 16, 2015 8:46pm

Send me see the css after you'd made the changes I suggested.

Thanks Joe

Answer 9 · 2015-11-16T20:47:59Z

November 16, 2015 8:47pm

/*GENERAL*/



#wrapper{
  max-width: 940px;
  margin: 0 auto;
  padding: 0 5%;
}

a{
  text-decoration: none;
}

img{
  max-width: 100%;
}

h3{
  margin: 0 0 1em 0;
}
/*HEADING*/

header {
  float: left;
  margin: 0 0 30px 0;  
  padding: 5px 0 0 0;
  width: 100%;
}

#logo{
  text-align: center;
  margin: 0;
}

h1{
  font-family: 'Changa One', sans-serif;
  margin: 15px 0;
  font-size: 1.75em;
  font-weight: normal;
  line-height: 0.8em;
}

h2{
  font-size: 0.75em;
  margin: -5px 0 0;
  font-weight: normal;
}

/* FOOTER */

footer {
  font-size: 0.75em;
  text-align: center;
  clear: both;
  padding-top: 50px;
  color: #ccc;
}

.social-icon{
  width: 20px;
  height: 20px;
  margin: 0 5px;
}

/*PAGE PORTFOLIO*/

#gallery {
  margin: 0;
  padding: 0;
  list-style: none;
}

#gallery li{
  float: left;
  width: 45%;
  margin: 2.5%;
  background-color: #f5f5f5;
  color: #bdc3c7;
  min-height: 190px;
}

#gallery li a p {
  margin: 0;
  padding: 5%;
  font-size: 0.75em;
  color: #bdc3c7;
}

/*PAGE ABOUT*/

.profile-photo{
  display: block;
  max-width: 150px;
  margin: 0 auto 30px;
  border-radius: 100%;
}

/*PAGE:CONTACT*/

.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;
}
.contact-info li.phone a{
  background-image: url('../img/phone.png');
 }
.contact-info li.mail a{
  background-image: url('../img/mail.png');
 }
.contact-info li.twitter a{
  background-image: url('../img/twitter.png');
 }
body {
  background-color: #fff;
  color: #999;
}

header {
  background: #6ab47b;
  border-color: #599a68;
}

nav{ 
  background: #599a68;
}

h1, h2 {
  color: #fff;
}

a{
    color: $6ab47b;
}

nav a, nav a:visited{
  color: #fff;
}

nav a.selected, nav a:hover{
  color: #32673f;
}


body{
  font-family: 'Open Sans', sans-serif;
}

/*NAVIGATION*/

nav {
  text-align: center;
  padding: 10px 0;
  margin: 20px 0 0;
}

nav ul {
  list-style: none;
  margin: 0;
  padding: 0;

}

nav li{
  display: inline-block;
}

nav a {
  font-weight: 800;
  padding: 15px 10px;
}



/*HEADING*/







/*COLORS*/

Answer 10 · 2015-11-16T20:50:25Z

November 16, 2015 8:50pm

Which browser are you looking in? Chrome?

It looks fine for me.

Joe

Answer 11 · 2015-11-16T20:51:35Z

November 16, 2015 8:51pm

Hi Ivan,

change it from 190px to 200px and see if that works.

Joe

Answer 12 · 2015-11-16T20:54:55Z

November 16, 2015 8:54pm

Thanks for patience, but doesn't work. I am using Chrome. Here is screenshot

Answer 13 · 2015-11-16T20:56:36Z

November 16, 2015 8:56pm

In Firefox is the same problem. Just checked.

Answer 14 · 2015-11-16T20:59:29Z

November 16, 2015 8:59pm

Ok.

Did you change any of the code in your HTML or responsive.css since what you posted yesterday?

Answer 15 · 2015-11-16T21:03:56Z

November 16, 2015 9:03pm

Here is code, I don't remember, I think I didn't

@media screen and (min-width: 480px){
/*  TWO COLUMN LAYOUT*/

  #primary{
     width: 50%;
     float: left;
  }
  #secondary{
     width: 40%;
     float: right;
  }

/*  PAGE: PORTFOLIO*/
  #gallery li{
    width: 28.3333%;
  }

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


}

/*  PAGE: ABOUT*/
  .profile-photo{
    float: left;
    margin: 0 5% 80px 0;
  }

@media screen and (min-width: 660px){
/* HEADER*/
    nav{
      background: none;
      float: right;
      font-size: 1.125em;
      margin-right: 5%;
      text-align: right;
      width: 45%;
    }

    #logo{
      float: left;
      margin-left: 5%;
      text-align: left;
      width: 45%;

    }

    h1{
      font-size: 2.5em;
    }

    h2{
      font-size: 0.825em;
      margin-bottom: 20px;
    }

    header{
      border-bottom: 5px solid #599a68;
      margin-bottom: 60px;

    }
}

Answer 16 · 2015-11-16T21:56:57Z

November 16, 2015 9:56pm

Hi Ivan,

change your responsive.css to this:

@media screen and (min-width: 480px){
/*  TWO COLUMN LAYOUT*/

  #primary{
     width: 50%;
     float: left;
  }
  #secondary{
     width: 40%;
     float: right;
  }

/*  PAGE: PORTFOLIO*/
  #gallery li{
    width: 28.3333%;
  }

  @media (min-width: 700px) {
      #gallery li{
        min-height: 250px;
      }
  }

  }



}

/*  PAGE: ABOUT*/
  .profile-photo{
    float: left;
    margin: 0 5% 80px 0;
  }

@media screen and (min-width: 660px){
/* HEADER*/
    nav{
      background: none;
      float: right;
      font-size: 1.125em;
      margin-right: 5%;
      text-align: right;
      width: 45%;
    }

    #logo{
      float: left;
      margin-left: 5%;
      text-align: left;
      width: 45%;

    }

    h1{
      font-size: 2.5em;
    }

    h2{
      font-size: 0.825em;
      margin-bottom: 20px;
    }

    header{
      border-bottom: 5px solid #599a68;
      margin-bottom: 60px;

    }
}

Let me know if this works.

Joe

Answer 17 · 2015-11-16T22:09:06Z

November 16, 2015 10:09pm

This code is not correct

  @media (min-width: 700px) {
      #gallery li{
        min-height: 250px;
      }
  }

  }



}

Here is something which is not good, it's red in workspace.

Never mind Joe, I will do again whole lesson. Thank you very much, God bless you! Somewhere is typo probably. When I worked this track on my brother's account there was no error. And that was 5-10 days ago. On same machine.

Answer 18 · 2015-11-16T22:12:53Z

November 16, 2015 10:12pm

Try this last one, there was an extra curly brace that was causing the red error.

@media screen and (min-width: 480px){
/*  TWO COLUMN LAYOUT*/

  #primary{
     width: 50%;
     float: left;
  }
  #secondary{
     width: 40%;
     float: right;
  }

/*  PAGE: PORTFOLIO*/
  #gallery li{
    width: 28.3333%;
  }
}

@media (min-width: 700px) {
    #gallery li{
      min-height: 250px;
    }
}

/*  PAGE: ABOUT*/
  .profile-photo{
    float: left;
    margin: 0 5% 80px 0;
  }

@media screen and (min-width: 660px){
/* HEADER*/
    nav{
      background: none;
      float: right;
      font-size: 1.125em;
      margin-right: 5%;
      text-align: right;
      width: 45%;
    }

    #logo{
      float: left;
      margin-left: 5%;
      text-align: left;
      width: 45%;

    }

    h1{
      font-size: 2.5em;
    }

    h2{
      font-size: 0.825em;
      margin-bottom: 20px;
    }

    header{
      border-bottom: 5px solid #599a68;
      margin-bottom: 60px;

    }
}

The reason why the 6 was on a row of it's own was because you had this in your responsive.css

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

so it was clearing the floats and therefore staying on its own.

Answer 19 · 2015-11-16T22:17:18Z

November 16, 2015 10:17pm

Working!!!! Jeeeee. I needed to put also media SCREEN AND, you forgot screen and, but now I don't understand nothing :D It's important it's working :)))

When you have time explain me how this really works. Must listen to that responsive audio again :)

Answer 20 · 2015-11-16T22:18:05Z

November 16, 2015 10:18pm

There is no option to give you poins for effort ?? I have no option Best answer :(

Answer 21 · 2015-11-16T22:25:04Z

November 16, 2015 10:25pm

:)

Watch it again Ivan. This is the best way and I do this a lot when I didn't understand everything.

Yeah it doesn't help you when I change it without explaining why.

Also I don't use media screen and usually, but if Nic tells you to in the video then use it for good practise. He's better than me :)

Basically what you should learn from this is:

If you float items next to each other and they don't line up then it's probably because they have different heights.

This is why I added 'min-height: 200px' so then they all started with the same height.

And the reason that this still wasn't working and the picture with the 6 was on its own was because the nth-child selector was selecting that 6 picture and it had 'clear: left;' which clears the floats so nothing will float alongside it.

If that doesn't make any sense then don't worry.

Watch the videos over and over until you can do it on your own and then move to the next one.

Good luck!

Answer 22 · 2015-11-16T23:18:42Z

November 16, 2015 11:18pm

Ok, partially I understand, but tommorow is a brand new day and there is so lot of work to be done. So I'll try to implement all of this knowledge to my personal web page which I've created during the last 10 days. You can see it here if you want and comment it out link on page which is also some experimental web page :) Or you can tweet me, send msg on facebook etc. Here I can't see private messages. All that, of course, when you have time. Yes, I know, there is much of work to do on page, footer is not working and resizing is not implementing by this media screen functions. I'll watch video again and then try that on my page. Thanks a lot, Joe, have a nice day, for me is over, in Belgrade is over midnight :)

Welcome to the Treehouse Community

Looking to learn something new?

Ivan Kusakovic

Ivan Kusakovic

nth-child problem

Jesus Mendoza

Jesus Mendoza

22 Answers

Ivan Kusakovic

Ivan Kusakovic

Joe Consterdine

Joe Consterdine

Ivan Kusakovic

Ivan Kusakovic

Joe Consterdine

Joe Consterdine

Ivan Kusakovic

Ivan Kusakovic

Joe Consterdine

Joe Consterdine

Ivan Kusakovic

Ivan Kusakovic

Joe Consterdine

Joe Consterdine

Ivan Kusakovic

Ivan Kusakovic

Joe Consterdine

Joe Consterdine

Joe Consterdine

Joe Consterdine

Ivan Kusakovic

Ivan Kusakovic

Ivan Kusakovic

Ivan Kusakovic

Joe Consterdine

Joe Consterdine

Ivan Kusakovic

Ivan Kusakovic

Joe Consterdine

Joe Consterdine

Ivan Kusakovic

Ivan Kusakovic

Joe Consterdine

Joe Consterdine

Ivan Kusakovic

Ivan Kusakovic

Ivan Kusakovic

Ivan Kusakovic

Joe Consterdine

Joe Consterdine

Ivan Kusakovic

Ivan Kusakovic