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{
        width: 95%;
        margin: 0 auto;
                padding: 3px;
        clear: both;
        border: none;
    }
}
Yada yada, spiffy logo image with a funky monkey and a wiffle-ball bat.
Yippy Skippy another logo image with a ding-ding-dong touching tra-la-la.

Leave a Reply

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