3

I have a general question about media queries. The site I am working on has two responsive viewports:

  • max-width: 414 px (iPhone) and
  • max-width: 770px (iPad)

The style tags are written in that order in the css document. Because they are cascading, my iPad queries keep overriding my iPhone queries (and vice versa).

Is there a simple solution to this? It seems like I'm missing something really obvious.

H. Pauwelyn
  • 13,575
  • 26
  • 81
  • 144
Liz H.
  • 21
  • 1
  • 3
  • 2
    This is because of the order, see link: http://stackoverflow.com/questions/8790321/why-does-the-order-of-media-queries-matter-in-css – Michael Jan 12 '17 at 18:38

1 Answers1

10

When using the max width media query, order must be from largest to smallest. The opposite is true for min-width.

You'll find a detailed explanation of this here.

It's a nested layout, it should look something like this:

@media (max-width: 770px) {
  .css-rule {
  }
}

@media (max-width: 414px) {
  .css-rule {
  }
}

You can also try specifying a min width to the iPad size, which will make sure that the css contained in it will not fire below that width, like this:

@media (min-width: 415px) and (max-width:770px) {}

If you are loading external CSS files they may be overriding your file. Make sure that you put your most important, usually your custom CSS file, as the LAST file.

Check these guys out for media queries, they usually know what's up.

Let us know if it helped!

Michał
  • 868
  • 1
  • 10
  • 36