Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

HTML

Help please!

Why won't this work?

@media screen and (min-width: 480px) {
  body {
    background: navy;
  }
}

7 Answers

Alex Gervais
Alex Gervais
5,290 Points

Can you paste your index.html again?

Here it is.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Aiden MItchell | Change This!</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link href='https://fonts.googleapis.com/css?family=Roboto|Open+Sans:400,700,700italic,800' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="css/main.css">
    <link rel="stylesheet" href="css/responsive.css">
    <style> @media screen and (min-width: 480px) { body { background-color: lightgreen; } } </style> 
    @media screen and (min-width: 480px) {
  body {
    background: navy;
  }
}
  </head>
  <body>
    <header>
      <a href="index.html" id="logo">
        <h1>Aiden Mitchell</h1>
        <h2>Change This!</h2>
      </a>
      <nav>
        <ul>
          <li><a href="index.html" class="selected">Portfolio</a></li>
          <li><a href="about.html">About</a></li>
          <li><a href="contact.html">Contact</a></li>
        </ul>
      </nav>
    </header>
    <div id="wrapper">
      <section>
        <ul id="gallery">
          <li>
              <a href="img/numbers-01.jpg">
                <img src="img/numbers-01.jpg" alt="">
                <p>placeholder</p>
              </a>
          </li>
          <li>
              <a href="img/numbers-02.jpg">
                <img src="img/numbers-02.jpg" alt="">
                <p>placeholder</p>
              </a>
          </li>
          <li>
              <a href="img/numbers-06.jpg">
                <img src="img/numbers-06.jpg" alt="">
                <p>placeholder</p>
              </a>
          </li>
          <li>
              <a href="img/numbers-09.jpg">
                <img src="img/numbers-09.jpg" alt="">
                <p>placeholder</p>
              </a>
          </li>
          <li>
              <a href="img/numbers-12.jpg">
                <img src="img/numbers-12.jpg" alt="">
                <p>placeholder</p>
              </a>
          </li>
        </ul>
      </section>
      <footer>
        <a href="mailto:aidenjwylie@hotmail.com"><img src="img/mail.png" alt="Mail Logo" class="social"></a>
        <p>&copy; 2016 Aiden Mitchell.</p>
      </footer>
    </div>
  </body>
</html>
Alex Gervais
Alex Gervais
5,290 Points

You're pasting your css outside of the

tags. Remember in html, tags are like containers, you need to have an opening one and closing one, and all the content has to be between them. Basically, what's happening right now is that the browser is opening your web page and reading your index.html file line by line. It's hitting

and thinking "hey the css is going to start now" and it starts reading in "css mode". Then it hits the

tag and thinks "hey the css is stopping now because I hit the closing tag", so it goes back to 'html mode' and on the next line it hits your css outside of the style tags as html, this is why it's showing up in your web page, because it thinks the css is html.

Delete what is inside of your

tags and paste in-between them ``` body { background: red; }

Delete all the styling outside of your style tags as well and then refresh the page and tell me what happens. :)

It is now red no matter the size of the window.

Here is my HTML now.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Aiden MItchell | Change This!</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link href='https://fonts.googleapis.com/css?family=Roboto|Open+Sans:400,700,700italic,800' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="css/main.css">
    <link rel="stylesheet" href="css/responsive.css">
    <style> body { background: red; } </style>
  </head>
  <body>
    <header>
      <a href="index.html" id="logo">
        <h1>Aiden Mitchell</h1>
        <h2>Change This!</h2>
      </a>
      <nav>
        <ul>
          <li><a href="index.html" class="selected">Portfolio</a></li>
          <li><a href="about.html">About</a></li>
          <li><a href="contact.html">Contact</a></li>
        </ul>
      </nav>
    </header>
    <div id="wrapper">
      <section>
        <ul id="gallery">
          <li>
              <a href="img/numbers-01.jpg">
                <img src="img/numbers-01.jpg" alt="">
                <p>placeholder</p>
              </a>
          </li>
          <li>
              <a href="img/numbers-02.jpg">
                <img src="img/numbers-02.jpg" alt="">
                <p>placeholder</p>
              </a>
          </li>
          <li>
              <a href="img/numbers-06.jpg">
                <img src="img/numbers-06.jpg" alt="">
                <p>placeholder</p>
              </a>
          </li>
          <li>
              <a href="img/numbers-09.jpg">
                <img src="img/numbers-09.jpg" alt="">
                <p>placeholder</p>
              </a>
          </li>
          <li>
              <a href="img/numbers-12.jpg">
                <img src="img/numbers-12.jpg" alt="">
                <p>placeholder</p>
              </a>
          </li>
        </ul>
      </section>
      <footer>
        <a href="mailto:aidenjwylie@hotmail.com"><img src="img/mail.png" alt="Mail Logo" class="social"></a>
        <p>&copy; 2016 Aiden Mitchell.</p>
      </footer>
    </div>
  </body>
</html>
Alex Gervais
Alex Gervais
5,290 Points

Perfect. Now copy the text from inside the

tags and paste it in your responsive.css file. Then delete the

tags and the styling inside from your index.html so there's no css on it anymore.

Then refresh and see if the background of index.html is still red.

Thanks for all your help, but it was a spelling error in the name of my CSS file. It works now. Thanks again.

Jeff Wilton
Jeff Wilton
16,633 Points

It should work - it works for me. Is this part of a coding challenge with specific instructions?

No. It is in my workspace.

Alex Gervais
Alex Gervais
5,290 Points

Do you have the code in style tags?

This is in my index.html file.

<link rel="stylesheet" href="css/responsive.css">
Alex Gervais
Alex Gervais
5,290 Points

Make sure it's between

if it's inline.

If not try adding type="text/css" to your link.

That does not change anything.

Like this?

<link rel="stylesheet" href="type="text/css"css/responsive.css">
Alex Gervais
Alex Gervais
5,290 Points

Like this: ``` <link rel="stylesheet" type="text/css" href="css/responsive.css">

Can you post your file structure?

What is the file structure?

Alex Gervais
Alex Gervais
5,290 Points

It's just the way your folders look. So for example, you should have one main folder with the index.html file in it, and another folder called 'css' with your responsive.css file in it. Is this correct?

Yes.

Jeff Wilton
Jeff Wilton
16,633 Points

Also, try doing a hard refresh in the browser with Ctrl+shift+R to make sure you are seeing your newest changes.

Thanks, but it didn't help.

Alex Gervais
Alex Gervais
5,290 Points

Is anything on that style sheet working or is just the media query broken? It's possible that it is working and your window is not at the right size to activate the change.

I don't know. It is the only thing in that CSS file.

@media screen and (min-width: 480px) {
  body {
    background-color: lightgreen;
  }
}
Alex Gervais
Alex Gervais
5,290 Points

Under the last closing brace type this:

``` body { background-color: red; }

And see what happens. The page should turn entirely red.

Nope. The page does not turn red.

This is my CSS now.

@media screen and (min-width: 480px) {
  body {
    background-color: lightgreen;
  }
body { background-color: red; }
}
Alex Gervais
Alex Gervais
5,290 Points

Ok we're getting somewhere :). Take everything out except for ```body { background-color: red; }

Still no red.

Alex Gervais
Alex Gervais
5,290 Points

Ok if the only thing in your css file is: ```body { background-color: red; }

then the file path 'css/responsive.css' in your html link tag is most likely wrong. Is your 'responsive.css' file in a folder called 'css'?

Yes, it is in my folder called css.

Alex Gervais
Alex Gervais
5,290 Points

Can you post your whole index.html file?

This is my HTML.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Aiden MItchell | Change This!</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link href='https://fonts.googleapis.com/css?family=Roboto|Open+Sans:400,700,700italic,800' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="css/main.css">
    <link rel="stylesheet" href="css/responsive.css">
  </head>
  <body>
    <header>
      <a href="index.html" id="logo">
        <h1>Aiden Mitchell</h1>
        <h2>Change This!</h2>
      </a>
      <nav>
        <ul>
          <li><a href="index.html" class="selected">Portfolio</a></li>
          <li><a href="about.html">About</a></li>
          <li><a href="contact.html">Contact</a></li>
        </ul>
      </nav>
    </header>
    <div id="wrapper">
      <section>
        <ul id="gallery">
          <li>
              <a href="img/numbers-01.jpg">
                <img src="img/numbers-01.jpg" alt="">
                <p>placeholder</p>
              </a>
          </li>
          <li>
              <a href="img/numbers-02.jpg">
                <img src="img/numbers-02.jpg" alt="">
                <p>placeholder</p>
              </a>
          </li>
          <li>
              <a href="img/numbers-06.jpg">
                <img src="img/numbers-06.jpg" alt="">
                <p>placeholder</p>
              </a>
          </li>
          <li>
              <a href="img/numbers-09.jpg">
                <img src="img/numbers-09.jpg" alt="">
                <p>placeholder</p>
              </a>
          </li>
          <li>
              <a href="img/numbers-12.jpg">
                <img src="img/numbers-12.jpg" alt="">
                <p>placeholder</p>
              </a>
          </li>
        </ul>
      </section>
      <footer>
        <a href="mailto:aidenjwylie@hotmail.com"><img src="img/mail.png" alt="Mail Logo" class="social"></a>
        <p>&copy; 2016 Aiden Mitchell.</p>
      </footer>
    </div>
  </body>
</html>
Alex Gervais
Alex Gervais
5,290 Points

Try pasting this right into your head tag under the last link element and before the closing head tag:

@media screen and (min-width: 480px) {
  body {
    background-color: lightgreen;
  }
}
</style>

Are all your files named correctly?

Still does not change anything.

It just started working!

Alex Gervais
Alex Gervais
5,290 Points

Did it start working after you pasted in the above ^?

Yes, but it shows that code above my navigation.