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

CSS

Posted by 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
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

http://codepen.io/anon/pen/QwgXGq

Joshua Jones
Joshua Jones
4,756 Points

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