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

Posted by Susan Ortega
Susan Ortega
1,103 Points

Image gallery keeps breaking

Image gallery keeps breaking as soon as you start stretching out the page further. It looks fine at the mobile size, but when reaching desktop size 4th image doesn't stay in place it shifts down. I have copy/paste my reponsive.css code here. Any help with this would be great, since I can't seem to move further without fixing this issue. 

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


}

2 Answers

Jasper Leenarts
Jasper Leenarts
13,830 Points
Jasper Leenarts
Jasper Leenarts
13,830 Points

found the fault. you can not have a space between li: and nth-child

Susan Ortega
Susan Ortega
1,103 Points

Jasper Leenarts THANK YOU!!! Yes, it was the space I added btwn the li: & the nth-child. This absolutely fixed the problem. I appreciate all your help. Also, the reason I didn't put the section under portfolio page in the media query for 660px is because the video has it posted directly under the 1st media query. :)

Jasper Leenarts
Jasper Leenarts
13,830 Points
Jasper Leenarts
Jasper Leenarts
13,830 Points

The section under portfolio page probably needs to be in the 660px and above media query.