Media query not working with height

Question

This is my media query for resolution with width of 1280 pixels:

@media (min-width: 1270px) and (max-width: 1280px)

When I want to use seperate query for height like this:

@media (min-width: 1270px) and (max-height: 960px)

It doesn't work. It's not showing even in the developer tools in chrome. Can I get some suggestions?

i think you need to separate out the height/width portions with a comma, see this: http://stackoverflow.com/questions/11404744/media-queries-max-width-or-max-height — Abdul Ahmad, Feb 11 '16 at 21:31
@AbdulAhmad `@media screen and (min-width: 1270px), screen and (max-height: 960px )` — frenchbaguette, Feb 11 '16 at 21:35
Not working. It's still uses `@media (max-width: 1280px) and (min-width: 1270px)` and not `@media screen and (min-width: 1270px), screen and (max-height: 960px )` — frenchbaguette, Feb 11 '16 at 21:37
hmm.. sounds like a cache problem. try clearing out your cache and refreshing the page — Abdul Ahmad, Feb 11 '16 at 21:37
Media queries work in the format you specified. The problem must be something else. Example here: http://codepen.io/marceloa/pen/QyzRGY?editors=1100 — Marcelo, Feb 11 '16 at 21:38
https://jsfiddle.net/ahmadabdul3/fxaknLn7/ it works here see — Abdul Ahmad, Feb 11 '16 at 21:39

score 0 · Answer 1 · answered Feb 11 '16 at 21:40

0

you need to add a comma between different conditions (width/height)

@media screen and (min-width: 1270px), screen and (max-height: 960px )

answered Feb 11 '16 at 21:40

Abdul Ahmad

It would be good now, but now it's shows that at first uses `@media (max-width: 1280px) and (min-width: 1270px)` and just then the one with `height` – frenchbaguette Feb 11 '16 at 21:42
there's another problem then. are you referencing multiple css files? do they have different media queries? check all these things. did you try clearing your browser's cache? refresh page after. etc – Abdul Ahmad Feb 11 '16 at 21:44
I'm using only one .css It just shows this: `@media (min-width: 1270px) and (max-width: 1280px )` and then `@media (min-width: 1270px) and (max-height: 960px )` this – frenchbaguette Feb 11 '16 at 21:45
did you clear your browser cache? go to settings -> history -> clear all browsing data – Abdul Ahmad Feb 11 '16 at 21:47
Yes. I think I have a problem with res. There were before the same things happened and I manage to fixed them, probably I should try another options – frenchbaguette Feb 11 '16 at 21:49

nyn05 · Answer 2 · 2016-02-11T21:39:48.880

-1

You must add this code at first

<meta name="viewport" content="width=device-width" />

and use this link

@media screen and (max-width: 995px) , screen and (max-height: 700px) {
  ...
}

edited Feb 11 '16 at 21:39

answered Feb 11 '16 at 21:31

nyn05

1

i don't think he needs that – Abdul Ahmad Feb 11 '16 at 21:32
I have it. Media query's just doesnt work with heights – frenchbaguette Feb 11 '16 at 21:36
try this link http://stackoverflow.com/questions/11404744/media-queries-max-width-or-max-height – nyn05 Feb 11 '16 at 21:44

2 Answers2