@media only screen resolution height issues

I am trying to align a bottom bar that is in homepage footer of my website. I want to adjust it so it will look good on common screen resolutions.

I have an issue with these resolutions 1280×960 and 1280×1024

Read More
@media only screen and (max-width:1280px) and (max-height:960px){
    .tp-caption.black, .black {
        margin-top: 496px!important;
    }

And then use this code after that

@media only screen and (max-width:1280px) and (min-height:961px){
    .tp-caption.black, .black {
        margin-top: 464px!important;
    }

The issue is it uses the same css, for both resolutions. 1280×960 media query

also applied in 1280×1024 resolution.

It displays the 2nd media query css code in browser, but ignores it and take

the above query.

I want to set the margin for both resolutions, for both heights 960 & 1024.

Can someone please explain me how to fix this?

Related posts

1 comment

  1. Tried the same in fiddle, this works fine.
    jsfiddle.net/5wx9qqyq/3/

    One possible cause can be, missing closing braces for
    @media only screen and (max-width:1280px) and (max-height:960px){ }

    Please verify.

Comments are closed.