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

Posted by Q Staley
.a{fill-rule:evenodd;}techdegree
Q Staley
Front End Web Development Techdegree Student 7,368 Points

Media Queries are not taking effect in browser?

I've begun with the exact workspace from the video, using Chrome Browser. You can see my media query at the bottom of my CSS page (https://w.trhou.se/9birwckhdd).

I currently have this html code in place: 

@media all (max-width: 720px) {
  .primary-content,
  .secondary-content {
    background-color: red;
  }
}

But when I shrink my browser width, my page is unaffected. Any suggestions?

Q Staley
.a{fill-rule:evenodd;}techdegree
Q Staley
Front End Web Development Techdegree Student 7,368 Points

I solved my own problem. It seems the following, 

@media (max-width: 720px) {
 body {
    background-color: red;
  }
}
/* which was not affected by my browser size */

requires an 'all and' after @media.

I got the following snippet to work properly, including both the "all and . . ." after "@media" because without it, despite what the original video showed, my browser size had no effect on the page. 

/* includes 'all and' after @media, and works properly -----------  */

@media all and (max-width: 720px) {
  body{
    background-color: red;
  }
}

1 Answer

Steven Parker
Steven Parker
231,898 Points
Steven Parker
Steven Parker
231,898 Points

Actually, I think it was having the word "all" without the "and". If you leave both words off (like in the 2nd example), it should also work.