Columns plugin: making columns responsive?

Kirby 2 Solved ✅
1

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%;
}

2

Use media queries in your css to make .columns-3.column 100% width if the screen’s width is lower than x. Or if you prefer a mobile first approach, make 100% width the standard, and then use media queries to make three columns if the screen is wider than ?px. This is CSS stuff though, nothing Kirby related.

3

Worked perfectly. Thank you for the CSS support!

Kurt