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 trialTara Velis
6,506 PointsFor some reason, my columns on the 'Contact' page are not stacking on top of each other when resizing the browser window
And the gallery on my homepage keeps displaying three columns instead of two when I resize. What's the problem here?
https://teamtreehouse.com/workspaces/22909432#
Thanks!
8 Answers
Jennifer Nordell
Treehouse TeacherHi there! You've got a couple of issues here. One is a typo, but the big one is that your rules don't reside inside your media query. Take a look at your responsive.css:
@media screen and (min-width: 480px) {
}
This media query starts and ends with no rules defined. Then you have code that sets your rules, and then you have the start of another media query which also has no rules defined. This is why nothing is happening when resizing your browser. Nothing is defined in these rules.
Also, on one rule you managed to spell "gallery" as "galleri". I've taken the liberty of altering your code so that it works correctly. I've also included some comments. You may find it here:
@media screen and (min-width: 480px) { /* begin media query */
/****************************
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) { /* gallery was misspelled here as "galleri" */
clear: left;
}
} /* end media query */
@media screen and (min-width: 660px) { /* begin next media query */
} /* end next media query */
Hope this helps!
Tara Velis
6,506 PointsAh I see, it's the first time I'm using this so thanks for the explanation :-)
Below you can find a link to my snapshot:
Tara Velis
6,506 PointsHi Jennifer, thanks for your quick reply. Now it works, whoop whoop!
Brian Williams
765 PointsThanks you fixed mine too! :)
Dino Tudor
1,767 PointsIm having the same problem. Checked the spelling. Can someone give me a hand please! Thanks!
Tara Velis
6,506 PointsHi Dino, I think this is the same problem that I experienced. Your media queries are empty and don't have any rules defined. Make sure to put your code inside the curly brackets in order for your media queries to work. Check out Jennifer's answer for a detailed explanation. Good luck!
Dino Tudor
1,767 PointsThanks Tara!! Perfect! Got it!
Natacha Schiettekatte
3,331 PointsHi! I think I might be having a similar problem, it's not creating the additional columns: https://w.trhou.se/9m0d39dlex if anyone could help me thanks!
koss net
39 PointsYour line at the top needs the word "and" between screen and (min-width...
So this line:
@media screen (min-width: 448px) {
Should turn to this:
@media screen and (min-width: 448px) {
You have the same issue again near the bottom of the file, on line 38.
Natacha Schiettekatte
3,331 PointsThank you koss!
Jennifer Nordell
Treehouse TeacherJennifer Nordell
Treehouse TeacherHi, Tara! I'd love to help you with this, but the link that you posted is private to just you. What I'd like to see is a snapshot. This will create a link that we can use to create a copy of your workspace and help you debug this.