Column-Matic Responsive Test

Column-Matic Shortcode

[[column class="column_left" float=""]Yada yada, spiffy logo image with a funky monkey and a wiffle-ball bat.[/column]] [[column class="column_right" float=""]Yippy Skippy another logo image with a ding-ding-dong touching tra-la-la.[/column]] [[end_columns]]

CSS

For normal screens:
.column_left {
margin-left:0;
float:left;
width: 40%;
}
.column_right {
float: left;
margin-left: 10px;
border-left: 1px dotted red;
padding-left: 10px;
width: 40%;
}

For Screens smaller than 450px wide:
@media (max-width: 450px) {
.column_left, .column_right{
float: none;
max-width: 95%;
margin: 0 auto;
clear: both;
border: none;
}
}

[column class=”column_left” float=””]Yada yada, spiffy logo image with a funky monkey and a wiffle-ball bat.[/column] [column class=”column_right” float=””]Yippy Skippy another logo image with a ding-ding-dong touching tra-la-la.[/column] [end_columns]

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>