We would like to know how to control Column Count with Media Queries.
The column-count
property controls how many
vertical columns text will be
broken into.
<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
article p {<!-- ww w .ja v a2 s. c o m-->
-moz-column-rule: 1px solid #ccc;
-webkit-column-rule: 1px solid #ccc;
column-rule: 1px solid #ccc;
-moz-column-gap: 1.5em;
-webkit-column-gap: 1.5em;
column-gap: 1.5em;
}
@media only screen and (min-width: 500px) {
article p {
-moz-column-count: 3;
-webkit-column-count: 3;
column-count: 3;
}
}
</style>
</head>
<body>
<section>
Drag the windows smaller to see 3 columns revert to single column...
<article>
<p>This is a test. This is a test. This is a test. This is a test.
This is a test. This is a test. This is a test. This is a test.
This is a test. This is a test. This is a test. This is a test.
This is a test. This is a test. This is a test. This is a test.
This is a test. This is a test. This is a test. This is a test.
This is a test. This is a test. This is a test. This is a test.
This is a test. This is a test. This is a test. This is a test.
This is a test. This is a test. This is a test. This is a test.
This is a test. This is a test. This is a test.
This is a test. This is a test. This is a test. This is a test.
This is a test. This is a test. This is a test. This is a test.
This is a test. This is a test. This is a test. This is a test.
This is a test. This is a test. This is a test. This is a test.
This is a test. This is a test. This is a test. This is a test.
This is a test. This is a test. This is a test. This is a test. </p>
</article>
<section>
</body>
</html>
The code above is rendered as follows: