Responsive columns CSS3 + @media

Responsive columns CSS3 + @media

by Andrew Pougher

HTML

<script src="http://fonts.googleapis.com/css?family=Domine:400,700"></script>
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css">
<div class='container'>
    <div class="row-fluid">
        <div class='mastheadline'>
             <h1>Responsive columns CSS3 + @media</h1>
            <hr class="soften">
             <h5>Testing how clean we can be</h5> 
            <hr class="soften">
        </div>
        <div class='content'>Process is often shaped by how teams are organized. In the context of designing for the multi-device web, the high level of iteration and communication required to build a modern website is rendering the assembly line approach obsolete… read more</div>
        <hr class="soften">
    </div>
</div>

CSS

body {
	    background: #f7f5e9;
	    font: normal 100%/1.5'Domine', Georgia, "Times New Roman", serif;
	    -webkit-text-size-adjust: 100%;
	    -ms-text-size-adjust: 100%;
	}
	h5 {
	    font-weight:700;
	    color:#777777;
	    text-transform:uppercase;
	    font-size:0.7em;
	    letter-spacing:3px
	}
	.mastheadline {
	    margin: 60px 0;
	    text-align: center;
	}
	/* Faded out hr */
	hr.soften {
	    height: 1px;
	    background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0), rgba(0, 0, 0, .1), rgba(0, 0, 0, 0));
	    background-image: -moz-linear-gradient(left, rgba(0, 0, 0, 0), rgba(0, 0, 0, .1), rgba(0, 0, 0, 0));
	    background-image: -ms-linear-gradient(left, rgba(0, 0, 0, 0), rgba(0, 0, 0, .1), rgba(0, 0, 0, 0));
	    background-image: -o-linear-gradient(left, rgba(0, 0, 0, 0), rgba(0, 0, 0, .1), rgba(0, 0, 0, 0));
	    border: 0;
	}
	@media screen and (min-width: 20.000em) {
	    /*320px*/
	    h1 {
	        color:#4eccdd
	    }
	}
	@media screen and (min-width: 25.000em) {
	    /*400px*/
	    h1 {
	        color:#222222
	    }
	}
	@media screen and (max-width: 37.438em) {
	    /*599px*/
	    h1 {
	        color:#777777
	    }
	    .content {
	        -webkit-column-count: 2;
	        -moz-column-count: 2;
	        -o-column-count: 3;
	        column-count: 2;
	    }
	}
	@media screen and (min-width: 37.500em) {
	    /*600px*/
	    .container {
	        width:85%;
	    }
	    body {
	        font-size: 112.5%;
	        line-height: 1.6em;
	    }
	    h2, h3, h4 {
	        font-size: 1.875em;
	        line-height: 1.3em;
	    }
	    .content {
	        -webkit-column-count: 3;
	        -moz-column-count: 3;
	        -o-column-count: 3;
	        column-count: 3;
	    }
	}