CSS Media Queries

[MrTIMarshall]

Hello,

I have the Google Chrome extension to change my browsers screen side to anything I want with some already preset. One of which is titles "Not so old computers" which is 1280, however as you see in the CSS Media Query below, although it is set to this, it does not seem to work.

@media only screen and (min-width : 1280px) {
	/** MY css is here... **/
}

I tried editing the minimum width to -10px which had no effect then a further -10px (1260px instead of 1280px) and I finally got a result.

Any ideas about this?

Best Regards,
Tim

[VIPStephan]

Does this extension calculate the browser chrome (window) or the viewport? Because these 20px are usually the space the scrollbar takes. Firefox’s web developer toolbar has an option to show window size in the title, and it shows the actual window size and then also the viewport size.

[MrTIMarshall]

Originally Posted by VIPStephan

Does this extension calculate the browser chrome (window) or the viewport? Because these 20px are usually the space the scrollbar takes. Firefox’s web developer toolbar has an option to show window size in the title, and it shows the actual window size and then also the viewport size.

Window size: 1692 x 1024
Viewport size: 1523 x 828

I've never actually noticed this before as I need a x500 - x600 magnifications on to use my computer and it pops up at the bottom and I just checked.

I'll go and check the settings to see if I can fix this...

[MrTIMarshall]

I chose to view the 320x480px and go these results;

Window size: 336 x 593
Viewport size: 290 x 436

Guess I'll need to find either a better extention or?...

[VIPStephan]

Sounds like it. But you can also put some element with a certain width kind of as ruler into the page to see how the stylesheet changes with which size. For example put a div with a width a height of 10px and some background color so you actually see it, and then set a width on it in different media query rules, like:

@media only screen and (min-width : 860px) {
  #example {width: 860px;}
}
@media only screen and (min-width : 1280px) {
  #example {width: 1280px;}
}

You will then probably see it changing when the specific minimum width is reached.