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

HTML How to Make a Website Responsive Web Design and Testing Build a Three Column Layout

For 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!

Jennifer Nordell
seal-mask
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher

Hi, 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. :sparkles:

8 Answers

Jennifer Nordell
seal-mask
STAFF
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher

Hi 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! :sparkles:

Ah 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:

https://w.trhou.se/41udelkk1n

Hi Jennifer, thanks for your quick reply. Now it works, whoop whoop!

Brian Williams
Brian Williams
765 Points

Thanks you fixed mine too! :)

Dino Tudor
Dino Tudor
1,767 Points

Im having the same problem. Checked the spelling. Can someone give me a hand please! Thanks!

https://w.trhou.se/ulgf7qo242

Hi 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
Dino Tudor
1,767 Points

Thanks Tara!! Perfect! Got it!

Natacha Schiettekatte
Natacha Schiettekatte
3,331 Points

Hi! 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!

Your 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.