title: The screen size overwrites the other ones :S
body: <p>Ive been trying to make a change of my category images depending on screen size. But right now only the first screen width size are being used. It seems as though the other ones are being overridden by the first row of code (max-width: 769px). (on this site: <a href="http://origami.directory/" rel="nofollow">http://origami.directory/</a>)</p>
  
  <p>What can I do so it changes 3 times as it should do?</p>
  
  <pre><code>    .category-list-item {
    float: left;
    padding: 1em;
  }
  @media screen and (max-width: 769px) {
    .category-list-item { width: 20%; }
  };
  @media screen and (min-width: 480px) {
    .category-list-item { width: 25%; }
  };
  @media screen and (max-width: 480px)  {
    .category-list-item { width: 33.33%; }
  };
  </code></pre>
  
  <p>If someone could help me fix this I would be super grateful!
  / Martin</p>