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

Watch Video

Posted May 12, 2015 8:11pm by

@media not working??

Media query is not working and my code is exactly the same as the video. When I resize the screen there is no change is the color. Please help.

@media (max-width: 960px) { body { background: royalblue; } p { color: white; } }

May 12, 2015 8:20pm

hey sean, i think you just forgot a semicolon ( 960px;)

May 12, 2015 8:23pm

There is no semi-colon needed when declaring the size of a media query.

May 12, 2015 8:23pm

in the video he says not to add the semicolon, but I tried both ways and still doesn't work. Thanks for the reply though.

It's really annoying :(

May 12, 2015 8:26pm

The snippet you provided works for me locally. Want to post the rest of your stylesheet?

May 12, 2015 8:27pm

good to know, thanks jeff

May 12, 2015 8:27pm

In fact, adding a semicolon there is not allowed and will cause the browser to ignore your media query completely due to improper formatting.

May 12, 2015 8:33pm

here is my CSS file:

/* Web Fonts -------------------- */

@font-face {
  font-family: 'Abolition Regular';
   src: url('../fonts/abolition-regular-webfont.eot');
  src: url('../fonts/abolition-regular-webfont.eot?#iefix') format('embedded-opentype'),
       url('../fonts/abolition-regular-webfont.woff') format('woff'),
       url('../fonts/abolition-regular-webfont.ttf') format('truetype');
}

/* Base Styles -------------------- */

* {
  box-sizing: border-box;
}

body {
  color: #878787;
  margin: 0;
  font: 1em/1.5 "Helvetica Neue", Helvetica, Arial, sans-serif;
}

h1,
h2 {
  font-family: 'Abolition Regular', Helvetica, Arial, sans-serif;
}

h1 {  
  font-size: 5.625rem; /* 90px/16px  */
  color: rgba(255, 255, 255, 1);
  text-transform: uppercase;
  font-weight: normal;
  line-height: 1.3;
  text-shadow: 0 1px 1px rgba(0, 0, 0, .8);
  margin: 12px 0 0;
}

h2 {
  font-size: 3.3125em; /* 53px/16px  */
  font-weight: normal;
  line-height: 1.1;
  margin: 0 0 .5em; /* 0 0 26px */
}

h3 {
  font-size: 1.25em; /* 20px/16px  */
  color: #48525c;
  line-height: 1.2;
  margin-bottom: 1.7em; /* 34px */
}

img {
  max-width: 100%;
  margin-bottom: 20px;
  border-radius: 10px;
}

ul,
ol {
  margin: 30px 0;
}

li {
  margin-bottom: 10px;
}

/* Pseudo-classes ------------------ */

a:link {
  color: rgb(255, 169, 73);
  text-decoration: none;
}

a:visited {
  color: lightblue;
}

a:hover {
  color: rgba(255, 169, 73, .4);
}

a:active {
  color: lightcoral;
}

/* Main Styles --------------------- */

.main-header {
  padding-top: 170px;
  height: 850px;
  background: linear-gradient(#ffa949, transparent 90%),
              linear-gradient(0deg, #fff, transparent ),
              #ffa949 url('../img/mountains.jpg') no-repeat center;

  background-size: cover;

}

.title {
  color: white;
  font-size: 1.625rem; /* 26px/16px */
  letter-spacing: .065em;
  font-weight: 200;
  border-bottom: 2px solid;
  padding-bottom: 10px;
}

.intro {
  font-size: 1.25em; /* 20px/16px */
  line-height: 1.6;  
}

.primary-content,
.main-header,
.main-footer {
  text-align: center;
}

.primary-content {
    padding-top: 25px;
  padding-bottom: 95px;
}

.secondary-content {
    padding-top: 80px;
    padding-bottom: 70px;
  border-bottom: 2px solid #dfe2e6;
}

.callout {
  font-size: 1.25em;
  border-bottom: 3px solid;
  padding: 0 9px 3px;
  margin-top: 20px;
  display: inline-block;
}

.main-footer {
  padding-top: 60px;
  padding-bottom: 60px;
  border-bottom: 10px solid #ffa949;
}

.t-border {
  border-top: 2px solid #dfe2e6;
}

/* Layout Styles ------------------ */

.primary-content, 
.secondary-content {
  width: 75%;
  padding-left: 50px;
  padding-right: 50px;
  margin: auto;
  max-width: 960px;
}

.wildlife {
  color: white;
  text-align: left;
  padding: 18% 24%;
  border-top: 10px solid #ffa949;
  margin: 105px 0 60px;
  background: #434a52 url('../img/bear.jpg') no-repeat center;
  background-size: cover;
  box-shadow: inset 0 0 50px 10px rgba(0, 0, 0, 1);
  border-radius: 10px;
}

.arrow {
  width: 50px;
  margin-top: 150px;
}

/* Floated Columns ------------------ */

.resorts,
.tips {
  width: 46.5%;
}

.tips {
  float: left;
}

.resorts {
  float: right;
}

/* Float Clearfix ------------------ */

.group:after {
  content: "";
  display: table;
  clear: both;
}

/* Media Queries -------------------- */

@media (max-width: 960px;) {
  body {
  background: royalblue;
  }
  p {
    color: white;
  }
}

@media (max-width: 480px) {
  body {
    background: darkred;
  }
}

@media (min-width: 481px) and (max-width: 700px) {
  body {
    background: seagreen;
  }
  p {
    color: white;
  }
}

May 12, 2015 8:36pm

You have a semi-colon in the 960px media query. Everything worked as expected once that was removed.

May 12, 2015 8:38pm

please ignore the semi-colon. was playing around with it and forgot to change it back when pasting my code :)

May 12, 2015 8:43pm

haha pesky semicolons...

May 12, 2015 8:48pm

I cleaned up your code so it appears better in the forum here. Other than that semicolon, though, I can't see a problem with your media query. Quite strange.

May 12, 2015 8:55pm

I tried the code in sublime text just in case there's a bug with workspace but still not working.

May 12, 2015 8:56pm

Markdown Cheatsheet

<!DOCTYPE html>
<html>
  <head>
    <title>Lake Tahoe</title>
    <link rel="stylesheet" href="css/style.css">
  </head>
  <body> 
    <header id="top" class="main-header">
      <span class="title">Journey Through the Sierra Nevada Mountains</span>
      <h1>Lake Tahoe, California</h1>
      <img class="arrow" src="img/arrow.svg" alt="Down arrow">
    </header>

        <div class="primary-content t-border">
            <p class="intro">
                Lake Tahoe is one of the most breathtaking attractions located in California. It's home to a number of ski resorts, summer outdoor recreation, and tourist attractions. Snow and skiing are a significant part of the area's reputation.
            </p>
            <a class="callout" href="#more">Find out more</a>

      <div class="wildlife">
        <h2>Check out all the Wildlife</h2>
        <p>
          As spawning season approaches, the fish acquire a humpback and protuberant jaw. After spawning, they die and their carcasses provide a feast for gatherings of <a href="#mink">mink</a>, <a href="#bears">bears</a>, and <a href="#eagles">bald eagles</a>.
        </p>
      </div><!-- End .wildlife -->

            <a class="callout" href="#wildlife">See the Wildlife</a>
        </div><!-- End .primary-content -->

        <div class="secondary-content t-border group"> 
      <div class="resorts">
        <img src="img/resort.jpg" alt="Resort">
        <h3>From Tents to Resorts</h3>
        <p>
          Lake Tahoe is full of wonderful places to stay. You have the ability to sleep in the outdoors in a tent, or relax like a king at a five star resort. Here are our top three resorts:
        </p>
        <ul>
          <li><a href="#hotels">Lake Tahoe Resort Hotel</a></li>
          <li><a href="#resorts">South Lake Tahoe Resorts</a></li>
          <li><a href="#lodging">Tahoe Ski Resort Lodging</a></li>
        </ul>       
      </div>

      <div class="tips">
        <img src="img/mtn-landscape.jpg" alt="Mountain Landscape">
        <h3>Pack Accordingly</h3>
        <p>
          One of most important things when it comes to traveling through the great outdoors is packing accordingly. Here are a few tips:
        </p>
        <ol>
          <li>Bring layers of clothing</li>
          <li>Pack sunscreen</li>
          <li>Carry extra water just in case</li>
          <li>Pack light</li>
        </ol>
      </div>
        </div><!-- End .secondary-content -->

        <footer class="main-footer">
            <p>All rights reserved to the state of <a href="#">California</a>.</p>
            <a href="#top">Back to top &raquo;</a>
        </footer>
  </body>
</html>

May 12, 2015 9:08pm

Okay, so now I'm doing the media queries for 'Adjusting the Layout with Media Queries' and they appear to be working but the background color still doesn't work. This is weird!

2 Answers

May 28, 2015 7:01pm

I was having exactly the same issue until I removed the "all" from @media all (max-width:960px).

Suddenly it started working when it hadn't been working before. Odd.

May 28, 2015 8:59pm

In that case, all is an argument, so if you want to add (max-width: 960px) to it, you need the and keyword in between the two.

February 26, 2016 1:19am

Thank you, that fixed the problem :)

May 12, 2015 8:27pm

Hi, Sean.

I'm not really sure why it's not working for you; what you have written should work as a media query and turn the screen blue when the width is smaller than 960px. I've just checked myself copying your CSS and it works fine. Perhaps something before or after that media query is interfering?

Posting to the forum is only allowed for members with active accounts.
Please sign in or sign up to post.

Welcome to the Treehouse Community

Looking to learn something new?

Sean Blythe

Sean Blythe

@media not working??

evan rost

evan rost

Jeff Lemay

Jeff Lemay

Sean Blythe

Sean Blythe

Jeff Lemay

Jeff Lemay

evan rost

evan rost

Ryan Field

Ryan Field

Sean Blythe

Sean Blythe

Jeff Lemay

Jeff Lemay

Sean Blythe

Sean Blythe

evan rost

evan rost

Ryan Field

Ryan Field

Sean Blythe

Sean Blythe

Sean Blythe

Sean Blythe

Sean Blythe

Sean Blythe

2 Answers

Perry Eising

Perry Eising

Ryan Field

Ryan Field

Christopher Weller

Christopher Weller

Ryan Field

Ryan Field