CSS media queries and screen resolution - css

Question

I am trying to get these columns to show vaguely under these conditions:
When on a phone -- show one column (at 100%)
When on a tablet -- show two columns (at 50%)
When on a desktop -- show as many as will fit
Here is my CSS code thus far but it's not working as expected:
EDIT: I modified the media queries a bit and the background color is changing as expected...but the widths are not. To re-iterate...on small devices I want DIV's to take up 100% screen width...on tablets I want them to split the screen in half...and on desktop screens I want them to spread across the entire width of screen accordingly.
#media screen and (max-width: 35.5em) { /* 568px or less */
div.listing {
-moz-columns: 100%;
-webkit-columns: 100%;
columns: 100%;
background-color: red;
}
}
#media screen and (min-width: 35.5em) and (max-width: 48em) { /* 568px - 768px */
div.listing {
-moz-columns: 50%;
-webkit-columns: 50%;
columns: 50%;
background-color: orange;
}
}
#media screen and (min-width: 48em) { /* 1024px */
div.listing {
-moz-columns: 350px;
-webkit-columns: 350px;
columns: 350px;
background-color: green;
}
}

Answer 1

Actually, your columns are working exactly as expected. Check out the spec: http://www.w3.org/TR/css3-multicol/#the-number-and-width-of-columns
The issue is that column-width is the minimum width. If you set your columns to be 50% the column will always default to 100% because no matter what, the column will always be at least half of it's container (I probably explained that weird). You basically need to set a desired em or px size for your tablet view. Or, as Adriano66 pointed out, set the number of columns, and not a width.
#media screen and (max-width: 35.5em) { /* 568px or less */
div.listing {
-moz-columns: 100%;
-webkit-columns: 100%;
columns: 100%;
background-color: red;
}
}
#media screen and (min-width: 35.5em) and (max-width: 48em) { /* 568px - 768px */
div.listing {
-moz-columns: 2;
-webkit-columns:2;
columns: 2;
background-color: orange;
}
}
#media screen and (min-width: 48em) { /* 1024px */
div.listing {
-moz-columns: 350px;
-webkit-columns: 350px;
columns: 350px;
background-color: green;
}
}
Fiddle:
http://jsfiddle.net/disinfor/a65pb9re/1/

Answer 2

I don't think u can use percentages this way, try typing 1 instead of 100% which equals to 1 column and 2 instead of 50% which equals to 2 columns
#media screen and (max-width: 35.5em) { /* 568px or less */
div.listing {
-moz-columns: 1;
-webkit-columns: 1;
columns: 1;
background-color: red;
}
}
#media screen and (min-width: 35.5em) and (max-width: 48em) { /* 568px - 768px */
div.listing {
-moz-columns: 2;
-webkit-columns: 2;
columns: 2;
background-color: orange;
}
}
#media screen and (min-width: 48em){ /* 1024px */
div.listing {
-moz-columns: 350px auto;
-webkit-columns: 350px auto;
columns: 350px auto;
background-color: green;
}
}
Fiddle: http://jsfiddle.net/wprdhswr/1/
https://developer.mozilla.org/en-US/docs/Web/CSS/columns