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

Michael Araya
Michael Araya
982 Points
Posted by Michael Araya
Michael Araya
982 Points

background not changing after breakpoint

workspace snapshot ---- > https://w.trhou.se/328imwyiwf

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

<!DOCTYPE html>
<html>  
  <head>
    <meta charset="utf-8">
    <title>Michael Araya | designer</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link href="https://fonts.googleapis.com/css?family=Changa+One:400,400i|Open+Sans:400,600,600i,800" rel="stylesheet"> 
    <link rel="stylesheet" href="css/main.css">
    <link rel="stylesheet" href="css/responsive.css">
  </head>


  <body>
    <header>
      <a href="index.html" id="logo">
        <h1>Michael Araya</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">
              <img src="img/numbers-01.jpg" alt="number 1">
              <p>experimentation with color and texture</p>
            </a>
          </li>

          <li>
            <a href="img/numbers-02.jpg">
              <img src="img/numbers-02.jpg" alt="number 2">
              <p>playing with blending modes in photoshop</p>
            </a>
          </li>

          <li>
            <a href="img/numbers-06.jpg">
              <img src="img/numbers-06.jpg" alt="number 6">
              <p>trying to greate an 80's style of glows</p>
            </a>
          </li>

          <li>
            <a href="img/numbers-09.jpg">
              <img src="img/numbers-09.jpg" alt="number 9">
              <p>drips created using photoshop brushes</p>
            </a>
          </li>

          <li>
            <a href="img/numbers-12.jpg">
              <img src="img/numbers-12.jpg" alt="number 12">
              <p>creating shapes using repetition</p>
            </a>
          </li>

        </ul>
      </section>

      <footer>
        <a href="http://twitter.com/theillest"><img src="img/twitter-wrap.png" alt="twitter logo" class="social-icon"></a>
        <a href="http://facebook.com/michaelaraya"><img src="img/facebook-wrap.png" alt="facebook logo" class="social-icon"></a>


        <p>&copy; 2017 Michael Araya.</p>
      </footer>
    </div>
  </body>
</html>

Moderator edited: Markdown added to properly render the code on the forums.

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

Hi, Michael Araya! I took the liberty of adding some markdown to your code so that it'll be more readable for the Community. Take a look at the Markdown Cheatsheet at the bottom of the "Add an Answer" section for information on how to format your posts here :sparkles:

3 Answers

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

Hi again, Michael! Thanks for linking your workspace snapshot! I forked it and took a look around. And the reason it's not working, is because the CSS file isn't being loaded properly. And that's because of a typo. You're missing a single character.

At least this is true in your workspace. In the code shown above, it's fine. The problem in the workspace is in the index.html file. When I view the snapshot I see:

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

But your code above (which is correct) is:

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

Your workspace is missing the equals sign between rel and stylesheet.

Hope this helps! :sparkles:

Michael Araya
Michael Araya
982 Points
Michael Araya
Michael Araya
982 Points

I corrected it and still nothing sorry.

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

When I correct it and save it, it works on my end. Make sure you're refreshing the page. Also, if it still doesn't work after a refresh you may have to clear your browser cache. It could be loading in the old version of your code instead of the updated version. So after the cache clear, relaunch the preview and refresh the page. See if this helps.