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.

CSS

Joshua Jones
Joshua Jones
4,756 Points

Nothing Changes!

Arg! I've been trying to solve this issue for a few days now. Every time i make a change in my res.css when i refresh the pages nothing changes.

@media screen and (min-width: 480px) {

/**********************************
HEADING
***********************************/
  #primary {
    width: 50%;
    float: left;
    }
  #secondary {
    width: 40%;
    float: right;
  }

/**********************************
PAGE: PORTFOLIO
***********************************/

#gallery li {
    width: 28.3333%;
}

#gallery li:nth-child(4n) {
    clear:left;
  }


  /**********************************
ABOUT
***********************************/
  .joshpicture {
    float: left;
    margin: 0 5% 80px 0;
  }

@media screen and (min-width: 480px) {

      /**********************************
HEADER
***********************************/
  nav {
    background: none;
      float:right;
      font-size: 1.125em;
      margin-right: 5%;
      text-align:right;
      width: 45%;
    }
}

```HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Joshua Jones | DEV</title>
    <link rel="stylesheet" href="css/normalize.css" type="text/css">
    <link href='http://fonts.googleapis.com/css?family=Arvo|Droid+Serif:400,700,400italic' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="css/main.css">
    <link rel="stylesheet" href="css/res.css">
   </head>

  <body>
    <header>
      <a href="index.html" id="logo">
        <h1>Joshua Jones</h1>
        <h2>Development</h2>
      </a>

      <nav>
        <ul>
          <li><a href="index.html">Portfolio</a></li>
          <li><a href="about.html"class="selected">About</a></li>
          <li><a href="contact.html">Contact</a></li>
          <li><a href="showlove.html">Donations</a></li>
        </ul>
      </nav>
    </header> 

    <div id="wrapper">
      <section>
        <img src="img/Josh1.jpg" alt="Me" class="joshpicture">
        <h3>About</h3>
        <p>Hi I'm Josh Jones! I am a freshmen in college and a beginner programer!</p>
        <p>FOLLOW ON TWITTER</p>
      </section>

      <footer>
        <a href="http://twitter.com/Fishnibble">
          <img src="img/twitter-wrap.png" alt="Twitter logo" class="socialicon"> </a>
        <a href="http://facebook.com">
          <img src="img/facebook-wrap.png" alt="facebook logo" class="socialicon"> </a>
        <p>&copy; 2014 Joshua Jones.</p>
       </footer>
      </div>
  </body>
</html>

1 Answer

Fred Sites
Fred Sites
11,151 Points

Can you post the main.css or link to github/somewhere we can see it? Its tough to know what isnt changing if we cant see the main.css. Just curious, why do you have @media screen and (min-width: 480px) twice?

Joshua Jones
Joshua Jones
4,756 Points

Just realized i didn't mean to have 2 480px. Works fine now. Thanks!