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.

Don't you want max width?

epascarello
– epascarello

2013-03-29 17:49:59 +00:00
Commented Mar 29, 2013 at 17:49 — epascarello
– epascarello, Commented Mar 29, 2013 at 17:49

epascarello · Accepted Answer · 2013-03-29 17:51:35Z

3

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/

answered Mar 29, 2013 at 17:51

epascarello

208k20 gold badges206 silver badges246 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Media Query in CSS File not working at all

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related