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 trialsamuelgalvao
1,260 PointsBuilding 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) {
}
3 Answers
Jason Anello
Courses Plus Student 94,610 PointsYou'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
4,258 PointsMy goodness. TY so much. You, sir, have saved my evening study session from the hellish frustration.
samuelgalvao
1,260 PointsYou got it, Jason! Thank you for catching that silly error on my part. Cheers and best to ya!
Jason Anello
Courses Plus Student 94,610 PointsYou're welcome.
James Ingmire
11,901 PointsShould be max-width not min.
Valery Kukatov
6,996 PointsValery Kukatov
6,996 PointsDoes your HTML file have a 3rd image attached? I also wonder if the 660px at the bottom have to do anything with it.