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 samuelgalvao
samuelgalvao
1,260 Points

Building a 3 column layout not reverting back to 2 columns when shrinking below 480px

So everything has been going fine, mostly, until this snag. At the end of the "Build a Three Column Layout" I wrote the code and followed instructions as written and told, but my 3 columns of images in the portfolio section of my website do not revert back to 2 columns when reducing the page down below 480px as it should...here is my code. I'd appreciate any help...thanks.

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

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

}
Valery Kukatov
Valery Kukatov
6,996 Points
Valery Kukatov
Valery Kukatov
6,996 Points

Does your HTML file have a 3rd image attached? I also wonder if the 660px at the bottom have to do anything with it.

3 Answers

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

You've closed off your media query before the gallery styles. The closing curly brace for the first media query should come after the gallery styles.

Youngchul Kim
Youngchul Kim
4,258 Points

My goodness. TY so much. You, sir, have saved my evening study session from the hellish frustration.

samuelgalvao
samuelgalvao
1,260 Points
samuelgalvao
samuelgalvao
1,260 Points

You got it, Jason! Thank you for catching that silly error on my part. Cheers and best to ya!

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

You're welcome.

James Ingmire
James Ingmire
11,901 Points
James Ingmire
James Ingmire
11,901 Points

Should be max-width not min.