How to apply media query to only certain width range

Question

How to apply a media query between 360px - 640px. This is overlapping my (max-width: 320px) mediaquery.

@media screen and (min-width:360px) and (max-width:640px) and (orientation : landscape)

My webpage where the problem occurs

Answer 1

You don't have anything but this one media query in your page. If you want to change something under 320px you need to declare it separately. You should declare media queries that affect everything under the page width.

Here is a simple example of how media queries work: http://jsfiddle.net/ra9ry8t4/1/

It's probably easier to test in JSFiddle but here it is also as a snippet:

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

@media screen and (min-width: 320px) and (max-width:480px) {
  body { 
    background-color: blue;
  }
}

@media screen and (min-width: 320px) and (max-width:480px) and (orientation: landscape) {
  body { 
    background-color: green;
  }
}

@media screen and (max-width: 320px) {
  body { 
    background-color: red;
  }
}

<h1>Media Queries Example</h1>
<p>Increase or decrease the size of of this window to see the background color change</p>