Media query not working for desktop - html

Question

I'm trying to do a CSS for just my desktop, therefore i used the media query like below to link my css with my desktop.
My desktop resolution is 1440 x 900. Hence, my media query css for desktop is like this below
#media (max-width: 1440px) {
#loginpage {
position:relative;
margin-top:15%;
}
#headerbodyadmin {
position:relative;
margin-top:20%;
}
}
I tried used this method as well.
#media only screen and (max-width : 1440px){
}
Unfortunately, it's not working. I checked the various media query tutorial and this seems to be the correct way to implement css for my desktop resolution 1440x900.
May i know did i do anything wrong here?

Answer 1

Try adding one pixel to your max-width , #media (max-width: 1441px)

Answer 2

I checked the code and it working fine, make sure that you referenced id's in html page also.
Check this URL : http://jsfiddle.net/Ravichand/8kznk/
#media (max-width: 1440px) {
#loginpage {
position:relative;
margin-top:15%;
color:red;
}
#headerbodyadmin {
position:relative;
margin-top:20%;
color:skyblue;
}
}

Answer 3

I checked that and it works, here you can find example
http://jsfiddle.net/7VVsA/
#media (max-width: 1440px) {
#loginpage {
position:relative;
margin-top:15%;
background:red;
}
#headerbodyadmin {
position:relative;
margin-top:20%;
background:yellow;
}
}

Answer 4

Solution 01: Instead of max width. you can use min-width
Like
/*Sizes above 1024*/
#media (min-width: 1024px) {
}
Solution 02: Or you can try adding +1 to your width
Like
/*width 1441 to avoid any other conflict */
#media (max-width: 1441px) {
}

Answer 5

The width and height attribute describes the length for the view port and not the device screen resolution as device-width and device-height. If you use the width attribute it is possible that the considered value is smaller then your screen resolution width, because there is a border around the window or a scroll bar. Browsers on mobile devices usually utilize the entire width of the screen, so you don't see this effect there. Here what MDN says to the width attribute:
The width media feature describes the width of the rendering surface of the output device (such as the width of the document window, or the width of the page box on a printer).
So if you want to trigger the styles if your device has a width resolution of 1440px I would use it like this:
#media (max-device-width: 1440px) {
/* your style */
}
You can read more about this in the MDN documentation. Maybe this question is also interesting.