Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

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,592 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,592 Points

You're welcome.

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

Should be max-width not min.