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 nicolai kristensen
nicolai kristensen
2,316 Points

Image gallery keeps breaking!!

My image gallery keeps breaking into weird forms so that the 9 goes before 6 and so on, whenever i crop the page in, it happens from tablet to mobile section.. I followed the coding exactly as he explained. I double checked every spelling. Here is the css and responsive css

css:

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

Responsive:

@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.33333333333%;
  }

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

@media screen and (min-width: 660px) {

}

and btw the mistake is not that i write #GALLERY with capital cause that is my id for the gallery photos, please help

nicolai kristensen
nicolai kristensen
2,316 Points

I cant make it display better.. dont know how i make it look like that coding form

3 Answers

elk6
elk6
22,916 Points
elk6
elk6
22,916 Points

Hi Nicolai,

You are missing a semicolon after left in your portfolio section.

  #GALLERY li:nth-child(4n) {
    clear: left
  }
   }
nicolai kristensen
nicolai kristensen
2,316 Points

Editet the clear: left; in the question but it was not the mistake :)

nicolai kristensen
nicolai kristensen
2,316 Points
nicolai kristensen
nicolai kristensen
2,316 Points

Thanks for the input, unfortunately that was not the error.. it still doesnt make any changes still collapses together and forces it into some weird placement in the photo section..

nicolai kristensen
nicolai kristensen
2,316 Points
nicolai kristensen
nicolai kristensen
2,316 Points

No one her to participate in solving this? :)