@media only screen resolution height issues in WordPress

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

@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?

Post Views: 1

1 comment

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.

1 comment