I cant get the background to change

Question

I want to make my website responsive but it's not responding to the min-height changes I want. I want it to change colors when it reachers a breakingpoint so can someone analyze my CSS and html and see wha's wrong.

Thanks,

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

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8"> 
    <title>Dalexis Peguero | Designer </title>
    <link rel="stylesheet" href="normalize.css">
    <link href='http://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400italic,700italic,800italic,400,700' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="main.css">
    <link rel="stylesheet' href="responsive.css">
  </head>
  <body>
    <header>
      <a href="index.html" id="logo">
        <h1>Dalexis Peguero</h1>
        <h2>Designer</h2>
      </a>
      <nav>
        <ul>
          <li><a href="index.html">Portfolio</a></li>
          <li><a href="about.html" >About</a></li>
          <li><a href="contact.html" class="selected">Contact</a></li>
        </ul>
      </nav>
    </header>
    <div id="wrapper">
      <section>
        <h3>General Information</h3>
        <p>I am not currently looking for new design work, but I am available when I feel confident with my skills. </p>
        <p>Please reach me with email or facebook when it's not an emergency, but if you need an urgent consultation just call me.</p>
      </section>
      <section>
        <h3> Contact Details </h3>
        <ul class="contact-info">
          <li class="phone"><a href="tel:555-5555">555-5555</a></li>
          <li class="mail"><a href="mailto:dalexispeguero@gmail.com">dalexispeguero@gmail.com</a></li>
          <li class="twitter"><a href="http://twitter.com/intent/tweet?screen_name=nickrp">@Dpeguero</a></li>
        </ul>
      </section>
      <footer>
        <a href="http://twitter.com/nickrp"><img src="img/twitter-wrap.png" alt="twitter logo" class="social-icon"></a>
        <a href="http://facebook.com/dalexisp"><img src="img/facebook-wrap.png" alt="facebook logo" class="social-icon"></a>
        <p>&copy; 2014 Dalexis Peguero. </p>
      </footer>
    </div>
  </body>
</html>

Answer 1 · 2014-10-16T17:36:28Z

October 16, 2014 5:36pm

did everything that was said on here and my background isn't changing either.

Answer 2 · 2014-10-15T15:33:20Z

October 15, 2014 3:33pm

For a starter you have a semi-colon which you should remove..

This @media screen and (min-width: 660px;) { should instead be @media screen and (min-width: 660px) {

But otherwise your css looks good. Your problem may lie in your HTML which you haven't attached in your post. What you wrote is just the page output by the looks of it. Copy-paste your HTML code.

Answer 3 · 2014-10-16T00:31:06Z

October 16, 2014 12:31am

First of all, what you pasted above is not the HTML :) That's the output. The HTML is what you pasted in the second grey box at the top (your first post).

Anyway, so the problem seems to be with line 9 in your HTML code.

This:

<link rel="stylesheet' href="responsive.css">

Should instead be:

<link rel="stylesheet" href="responsive.css">

The problem was where you wrote stylesheet. You opened with double-quotes " but tried to close it with a single-quote '. Because of this, the browser could not interpret your code and thus wasn't able to load your responsive.css. Fixing this should help.

The best way to avoid small mistakes like these is to use a proper code editor. If you have done a mistake somewhere you'll see it from how it has colored the code. (see the difference between your line and the corrected one above). I use Notepad++ and I love it.

Another way is to enter your whole HTML code into a markup validator such as the one at W3C: http://validator.w3.org/. It will tell you where and if you got any errors.

Good luck!

Answer 4 · 2014-10-15T20:11:45Z

October 15, 2014 8:11pm

here's the html. It still doesn't work regardless the corrections :(

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Dalexis Peguero | Designer </title> <link rel="stylesheet" href="normalize.css"> <link href='http://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400italic,700italic,800italic,400,700' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="main.css"> <link rel="stylesheet" href="responsive.css"> </head> <body> <header> <a href="index.html" id="logo"> <h1>Dalexis Peguero</h1> <h2>Designer</h2> </a> <nav> <ul> <li><a href="index.html">Portfolio</a></li> <li><a href="about.html" >About</a></li> <li><a href="contact.html" class="selected">Contact</a></li> </ul> </nav> </header> <div id="wrapper"> <section> <h3>General Information</h3> <p>I am not currently looking for new design work, but I am available when I feel confident with my skills. </p> <p>Please reach me with email or facebook when it's not an emergency, but if you need an urgent consultation just call me.</p> </section> <section> <h3> Contact Details </h3> <ul class="contact-info"> <li class="phone"><a href="tel:555-5555">555-5555</a></li> <li class="mail"><a href="mailto:dalexispeguero@gmail.com">dalexispeguero@gmail.com</a></li> <li class="twitter"><a href="http://twitter.com/intent/tweet?screen_name=nickrp">@Dpeguero</a></li> </ul> </section> <footer> <a href="http://twitter.com/nickrp"><img src="img/twitter-wrap.png" alt="twitter logo" class="social-icon"></a> <a href="http://facebook.com/dalexisp"><img src="img/facebook-wrap.png" alt="facebook logo" class="social-icon"></a> <p>© 2014 Dalexis Peguero. </p> </footer> </div> </body> </html>

Answer 5 · 2014-10-15T20:16:55Z

October 15, 2014 8:16pm

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Dalexis Peguero | Designer </title> <link rel="stylesheet" href="normalize.css"> <link href='http://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400italic,700italic,800italic,400,700' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="main.css"> <link rel="stylesheet' href="responsive.css"> </head> <body> <header> <a href="index.html" id="logo"> <h1>Dalexis Peguero</h1> <h2>Designer</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" class="playing"> <img src="img/numbers-01.jpg" alt=""> <p>Experimentation with color and texture </p> </a> </li> <li> <a href="img/numbers-02.jpg"> <img src="img/numbers-02.jpg" alt=""> <p style="display:block;">Playing with games on this</p> </a> </li>
<li> <a href="img/numbers-06.jpg"> <img src="img/numbers-01.jpg" alt=""> <p>Trying to create an 90s style</p> </a> </li>
<li>
<a href="img/numbers-09.jpg"> <img src="img/numbers-09.jpg" alt=""> <p>Experimentation with color and texture </p> </a> </li>
<li> <a href="img/numbers-12.jpg"> <img src="img/numbers-12.jpg" alt=""> <p>Experimentation with color and texture </p> </a> </li>
</ul> </section> <footer> <a href="http://twitter.com/nickrp"><img src="img/twitter-wrap.png" alt="twitter logo" class="social-icon"></a> <a href="http://facebook.com/dalexisp"><img src="img/facebook-wrap.png" alt="facebook logo" class="social-icon"></a> <p>© 2014 Dalexis Peguero. </p> </footer> </div> </body> </html>

Welcome to the Treehouse Community

Looking to learn something new?

dalexis peguero

dalexis peguero

I cant get the background to change

Ken Alger

Ken Alger

5 Answers

Joanna Gumbley

Joanna Gumbley

Jordan Michaels

Jordan Michaels

Victor Reyes

Victor Reyes

Christian Andersson

Christian Andersson

Christian Andersson

Christian Andersson

dalexis peguero

dalexis peguero

dalexis peguero

dalexis peguero