Media Query in CSS File not working at all

Question

How to write a css media query to get the sidebar snap to lie between header and page content?I want this change to happen when the page width drops below 500 pixels. I am doing this for chrome browser.

Please have a look at the body of my HTML File.

The Contents of the body is filled using Javascript later. Buttons are created and appened to the "buttonAttachPoint". The contents is got in a form of HTML-Elements String and appeneded to the pageAttachPoint.

I have currently used the following css code to set the number of columns.

-webkit-column-count:3;
-webkit-column-gap:20px;
-webkit-column-rule:3px;

The following media query does not seem to have any effect:

@media screen and (min-width: 500px) {
body
{ background-color: #0f0;
-webkit-column-count:1; }
}

Any help would be appreciated.

Answer 1

I think you mixed up max and min.

@media screen and (max-width: 500px){
    body { 
        background-color: #0f0;
        -webkit-column-count:1; }
    }
}

Example: http://jsfiddle.net/HnPSF/1/