How can I apply a Media Query to both Height and Width?

Question

How can I apply a Media Query to both the Height and With of the Device I am currently using this:

@media (min-width: 1366px) and (max-width: 1366px){

but I Need to apply it also to the Height of 768px...

I only want it to apply if the Resolution of the Device is 1366x768px!

Black Mamba · Accepted Answer · 2017-06-27T04:53:07.983

3

@media (min-height: 768px) and (max-height: 768px) and (min-width: 1366px) and (max-width: 1366px) { ... }

Here is the possible duplicate question:

Here are a few references from the question :

edited Jun 27 '17 at 04:53

answered Jun 26 '17 at 16:42

Black Mamba

yeah, i Saw That but doesnt this also apply to everything above 500px? – Jun 26 '17 at 16:44
@YoKoGFX you want the query to apply only when the browser is exactly 1366x768? – cjl750 Jun 26 '17 at 18:12
@cjl750 Yes only at 1366x768 – Jun 26 '17 at 18:29
In that case, you would just specify four parts in your media query. `@media (min-height: 768px) and (max-height: 768px) and (min-width: 1366px) and (max-width: 1366px) { ... }`. I will let Ishan here go ahead and update his answer. Can you update your question to mention that you want the query to only apply for exactly those dimensions? That's not a typical scenario, so most people will not guess that is what you mean. – cjl750 Jun 26 '17 at 18:34
@cjl750 Here is what I use now :) `@media (max-height: 768px) and (min-width: 1366px) and (max-width: 1366px) { ... }` – Jun 26 '17 at 19:08
@YoKoGFX Yes, just go ahead and add in the `(min-height: 768px)` as well, and you should be good to go. – cjl750 Jun 26 '17 at 19:31
@cjl750 I tried this, but it doesnt work... very weird :/ – Jun 26 '17 at 19:33

1 Answers1