CODEWITHSUNDEEP
cssmedia-queries
Vipin Tyagi
Vipin Tyagi

Reputation: 101

How to apply media query to only certain width range

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

Upvotes: 9

Views: 20597

Answers (1)

thepio
thepio

Reputation: 6263

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>

Upvotes: 11

Related Questions