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 Build a Three Column Layout

Nicole Groenewald
Nicole Groenewald
5,055 Points
Posted by Nicole Groenewald
Nicole Groenewald
5,055 Points

media selector for nth child based on size?

So I'm having a wrapping issue that nth child fixed for the small size but when I expand it to full screen I need it to be a different nth child. I'm super confused on how to make this happen. Here is what I tried.... am I close??

@media screen and (max-width 479px) {
#gallery li:nth-child(3n) {
  clear: left;
  }
}

@media screen and (min-width: 480px) {
/******************************
Two column layout
******************************/
  #primary {
  width: 50%;
  float: left;
  }

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

@media screen and (min-width: 660px) {
  #gallery li {
  width: 27.5%
  }

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

1 Answer

James Hall-Treworgy
James Hall-Treworgy
3,326 Points
James Hall-Treworgy
James Hall-Treworgy
3,326 Points

Hello! :)

Perhaps, I'll post what my final code was for the responsive.css was and you can determine what you're trying to do from there. 

@media screen and (min-width: 480x) {

/************************
Two Column Layout
*************************/

  #primary {
    width: 50%;
    float: left;
    margin: 0px 0.5em 0px 0.5em;
  }

  #secondary {
    width: 40%;
    float: right;
    margin: 0px 0.5em 0px 0.5em;
  }



 /************************
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: 455;
  }

  #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;
  }
}
Nicole Groenewald
Nicole Groenewald
5,055 Points
Nicole Groenewald
Nicole Groenewald
5,055 Points

So that works for the sample images, this is for my page with my images... So I need it to do that concept on the 2 column and 3 column. I can get it to do one or the other but I can't get it to be responsive...