I am experimenting with the columns plugin. I love its simplicity but when I view a 3-column layout on a mobile device (using the column css that ships with the plugin) the columns overlap with each other. Can anyone give me some guidance on making the columns display underneath each other on narrow screens? Here is the css I am using now:
.columns {
margin-right: -2rem;
}
.column {
display: inline-block;
vertical-align: top;
padding-right: 2rem;
}
.columns-1 .column {
width: 100%;
}
.columns-2 .column {
width: 50%;
}
.columns-3 .column {
width: 33.33%;
}