Why are my media queries "stepping" on each other?

Question

I'm having a hard time using media queries for the different iPads screens. These are the ones I'm using:

iPad Pro in portrait mode only @media only screen and (min-width: 1024px) and (max-width: 1366px) and (orientation : portrait)

iPad 10 in portrait mode only @media only screen and (min-width: 810px) and (max-width: 1080px) and (orientation : portrait)

iPad Air 2 in portrait mode only @media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation : portrait)

Here's my issue. Let's say I set my background blue for iPad Pro, and a background red for iPad 10. The iPad Pro's background will also be red.

How can I target each iPad specifically?

I'm not familiar with iPad screen resolutions, but there's a lot of overlap in your queries so what do you expect to happen when more than one matches? — John Montgomery, Aug 24 '21 at 19:31
What about removing the `max-width` and ordering them from smallest min width to largest? — Phix, Aug 24 '21 at 19:31
@JohnMontgomery Well, I need to make adjustments for each iPad, that's why I need to target each one separatly. — Paula, Aug 24 '21 at 19:33
@Paula The stylesheet doesn't know what iPad model you're using in these queries, all it knows is the width and orientation. If your iPad has a width of 1024px, it's going to trigger all three conditions, and if there's conflicting styles it's going to keep whichever one is last. If you need to target specific models, you need to find some other way of distinguishing them. — John Montgomery, Aug 24 '21 at 19:37
To elaborate, media queries only really mean anything inasmuch as they isolate your CSS rules to one range of screen sizes. When there's overlap, all styles from all applicable media queries apply, and you might as well not use media queries. I suggest a mobile-first approach as demonstrated by [Bootstrap](https://getbootstrap.com/docs/4.1/extend/approach/#responsive) and others, working from smallest to largest with `min-`. Better, just use a fluid layout that isn't so tightly coupled to screen size. — isherwood, Aug 24 '21 at 19:44
I suspect I'm not understanding - but what is the reason for testing for a wide range of widths on each 'device' as opposed to just looking for the width? — A Haworth, Aug 24 '21 at 19:47
This question is unclear. Do you not see how your queries overlap with each other? I recommend some further reading on both media queries and on the min-width/max-width properties. https://stackoverflow.com/questions/16647380/max-width-vs-min-width and https://stackoverflow.com/questions/6370690/media-queries-how-to-target-desktop-tablet-and-mobile — TylerH, Aug 24 '21 at 19:49

score 1 · Answer 1 · answered Aug 24 '21 at 19:40

It's because it is hard for @media which to apply when screen is between (min-width: 810px) & (max-width: 1024px) as your values are overlapping of iPad 10 & iPad Air 2 . So it try to figure out which to apply when you are using ipad10 .
Instead you can use soft code in in height/width and use according to increasing width or decreasing one , like :

@media only screen and (min-width: 1080px) and (max-width: 1366px)
@media only screen and (min-width: 1024px) and (max-width: 1080px)
@media only screen and (min-width: min-width: 810px) and (max-width: 1024px)
@media only screen and (min-width: min-width: 768px) and (max-width: 810px)
@media only screen and (max-width: 768px)

score 0 · Accepted Answer · answered Aug 24 '21 at 19:35

I think you are having hard time with orientation remove orientation and all works fine.

Check that snippet.

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }

  html, body {
    height: 100%;
  }

  body {
    background-color: yellow;
  }

  @media only screen and (min-width: 1024px) and (max-width: 1366px) {
    body {
      background-color: blue;
    }
  }

  @media only screen and (min-width: 810px) and (max-width: 1080px) {
    body {
      background-color: red;
    }
  }

  @media only screen and (min-width: 768px) and (max-width: 1024px) {
    body {
      background-color: pink;
    }
  }

Even though this answer didn't solve my problem, it did help. Thanks. — Paula, Aug 24 '21 at 19:54

score 0 · Answer 3 · answered Aug 24 '21 at 19:58

As already stated, your media queries don´t know which device you are on, they only get the width and orientation. According to that, all three fire at 1024px.

@media only screen and (min-width: 1024px) and (max-width: 1366px) and (orientation : portrait)

Starts at and includes 1024px

@media only screen and (min-width: 810px) and (max-width: 1080px) and (orientation : portrait)

Includes 1024px

@media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation : portrait)

Ends at and includes 1024px

The second and the third also fire both between 810-1024px, the first and the second fire between 1024-1080px. I would recommend the approach of daad. The approach of erman999 still fires parallel.

Why are my media queries "stepping" on each other?

3 Answers3