title: CSS Media Query is affecting other queries also
body: <p>Below are the media queries i have figured out and i will use as default for every project that i will do.</p>
  
  <pre><code>@media only screen and (min-width : 320px) {}
  @media only screen and (min-width : 480px) {}
  @media only screen and (min-width : 768px) {}
  @media only screen and (min-width : 992px) {}
  @media only screen and (min-width : 1200px) {}
  </code></pre>
  
  <p>Now, the problem i am facing with them is that when i try to change something on 768 it gets changed on 320 also. I want to change for example logo if i hide it on 768 it should only be invisible on 768 only, whereas in this case i have to manually go on each and every query and make it visible.</p>
  
  <p>I have tried <code>min-width</code> also and <code>max-width</code> also.
  And <code>min-width</code> for mobile size and <code>max-width</code> for big sizes but with no luck.</p>
  
  <p>And if i use fixed queries then also i have to write code for every query.</p>
  
  <p>So, how do i make it work only for single size and does not affect the others, and most importantly not to write code for every size.</p>