Problem with columns in mobile

Although I would love a way to natively choose column counts for mobile, tablet and desktop, there is a relatively straightforward workaround using CSS flexbox.

Let’s assume you have a row with 6 columns and you want this to be 3 columns on tablet (under 1200px) and 2 columns on mobile (under 780px):

1. Give your row an ID of #collapsy
(using an ID rather than a class makes it easier to target)

2. Set the row’s ‘Collapse Behaviour’ as ‘No Collapse’
(this removes SiteOrigin’s built in responsive row settings)

3. Add the following CSS to your main CSS file:

div#collapsy {
    flex-wrap: wrap;
}
@media (max-width: 1200px) {
div#collapsy .panel-grid-cell {
    width: calc(33.33% - 2px);
    margin: 0 2px 2px 0;
    flex-grow: 1; /* This makes odd columns fill the full width */
}
div#collapsy > .panel-grid-cell:nth-of-type(3n) {
    margin-right: 0;
}
}
@media (max-width: 780px) {
div#collapsy .panel-grid-cell {
    width: calc(50% - 2px);
    margin: 0 2px 2px 0;
}
div#collapsy > .panel-grid-cell:nth-of-type(2n) {
    margin-right: 0;
}
}

This is very elegant as it uses flexbox to stretch the columns.

I’m sure it would be very easy to adjust this CSS to be an option in Page Builder rows (fingers crossed @misplon).

• This reply was modified 5 years, 4 months ago by shaunbowen.
• This reply was modified 5 years, 4 months ago by shaunbowen.
• This reply was modified 5 years, 4 months ago by shaunbowen.
• This reply was modified 5 years, 4 months ago by shaunbowen.