CSS media queries – resolution issues

[Nick_S]

I’m trying to create a page that does not scroll, and I’m using CSS media queries to make it fit various screen resolutions.
I want to make my page fit three screen resolutions such as:

1280 px by 960px
1280px by 768px
1280px by 720px

However, when I make two or more media queries with the same width (1280 px), only one of them works and not the other two.
How can I solve this? I’ve been very frustrated with this and I would greatly appreciate it if someone could help me out.

[joshuanhibbert]

Mind showing us the code you are currently using? Does it look anything like this:

@media (min-width: 1280px) and (min-height: 720px) {

...

}

@media (min-width: 1280px) and (min-height: 768px) {

...

}

@media (min-width: 1280px) and (min-height: 960px) {

...

}

[Nick_S]

@media screen and (min-width: 701px) and (max-width: 900px){

Content

}



@media screen and (min-width: 980px) and (max-width:1024px){

Content

}



@media screen and (min-width: 1100px) and (max-width:1152px){

Content

}



@media screen and (min-width:1300px) and (max-width:1440px){

Content

}



@media screen and (max-width: 1280px) and (max-height: 960px){

Content

}



@media screen and (max-width: 1280px) and (max-height: 768px){

Content

}



@media screen and (max-width: 1280px) and (max-height: 7200px){

Content

}



@media screen and (max-width: 1280px) and (max-height: 1024px){

Content /*Main*/

}

I’m having issues with the last four and I’m very new to media queries.

[Nick_S]

I forgot to post my HTML code.

The reason why I have max-width:1440px, it’s because this is the maximum resolution.

Thanks in advance!

[Nick_S]

Just to clarify, when I make two media queries with the same width, one cancels the other.
How can I avoid this without changing the width values?
Here is an example:

@media screen and (max-width:1280px)and (max-height:960px) {



Content



}



@media screen and (max-width:1280px)and (max-height:1024px) {



Content



}



@media screen and (max-width:1280px)and (max-height:720px) {



Content



}

[Nick_S]

I would greatly appreciate your help!

[Author]

Posts