Media query not working for desktop

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?

Shouldn't you just make queries for mobile and tablet and then the default would be desktop? Desktop's dont really need a query. — Andy Holmes, Jan 08 '14 at 08:36
What do you mean its not working? [Working Demo](http://jsfiddle.net/Ruddy/J5jMW/) — Ruddy, Jan 08 '14 at 08:37
@Ruddy because i used the above CSS code above in my webapp in VS2012 but there isn't any changes in the positioning of my elements. Not very sure why are you guys able to work it out :/ — Bryan, Jan 08 '14 at 08:41
Is your browser window really 1400px wide? Maybe the width of the scrollbar gets substracted?! — Alexander Scholz, Jan 08 '14 at 08:51
I used this website to check the resolution of my computer [here is the link](http://www.whatismyscreenresolution.com/) — Bryan, Jan 08 '14 at 08:53
The website shows the screen resolution and not the browser width (at least in my case). If you are using Chrome you can add a extension: http://stackoverflow.com/questions/20775775/alternative-to-chrome-extension-window-resizer — Alexander Scholz, Jan 08 '14 at 09:05

score 2 · Accepted Answer · answered Jan 08 '14 at 08:59

2

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

answered Jan 08 '14 at 08:59

score 1 · Answer 2 · answered Jan 08 '14 at 09:28

1

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;
}
}

answered Jan 08 '14 at 09:28

Ravi Chand Dudala

48
5

its so strange, that my mobile query @media only screen and (max-device-width: 700px) only worked for mobile phones but i wanted it also to work for people who like to shrink their tabs to take up half the screen too and your max-width works for phones and desktops – CDM social medias in bio Sep 07 '20 at 23:58

score 0 · Answer 3 · answered Jan 08 '14 at 08:38

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;
  }

}

score 0 · Answer 4 · edited May 23 '17 at 12:23

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.

score 0 · Answer 5 · answered Jan 08 '14 at 08:47

0

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) {

}

answered Jan 08 '14 at 08:47

Surjith S M

6,642
2
31
50

Media query not working for desktop

5 Answers5