"Responsive Email Design Using Column Count Property"
Bootstrap 3.2.0 Snippet by uxengineer

<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <h3>Divide Email Copy Into Even Columns with Column-Count</h3> </div> <div class="row"></div> <p class="media-responsive-columns">The purpose of these columns is to fit the copy content into the media size. It uses the Graceful Degradation and Progressive Enhancement available in Responsive Design. It's a combination of CSS3 media properties to increase or decrease the numbers or columns depending on any device used to display the email message. <br /><br /> <span class="strong">NOTE:</span> Beware of Outlook! Outlook stands on its own when it comes to email rendering. <br /><br /> <span class="strong">Here's a sample code:</span><br /><br /> <pre>   .media-responsive-columns {<br />     -webkit-column-count: 3; /* Chrome, Safari, Opera */<br />     -moz-column-count: 3; /* Firefox */<br />     column-count: 3;<br /> } </pre> <br /> <span class="strong">Here's how you can change the Column Count property for smaller media sizes:</span><br /><br /> <pre> @media (max-width: 480px) {<br />   .media-responsive-columns {<br />     -webkit-column-count: 1; /* Chrome, Safari, Opera */<br />     -moz-column-count: 1; /* Firefox */<br />     column-count: 1;<br />    }<br /> } </pre> <br /> Easily add code to any website, especially not using either Bootstrap or Foundation. This's a quick and easy way to get the responsiveness you want without spending money & time. </p> </div> </div>
.media-responsive-columns { -webkit-column-count: 3; /* Chrome, Safari, Opera */ -moz-column-count: 3; /* Firefox */ column-count: 3; } .strong { font-weight: bold; } @media (max-width: 797px) { .media-responsive-columns { -webkit-column-count: 2; /* Chrome, Safari, Opera */ -moz-column-count: 2; /* Firefox */ column-count: 2; } } @media (max-width: 480px) { .media-responsive-columns { -webkit-column-count: 1; /* Chrome, Safari, Opera */ -moz-column-count: 1; /* Firefox */ column-count: 1; } }

Related: See More


Questions / Comments: