Problem with columns in mobile

Hi pediaf

Thanks for reaching out.

Sorry, we missed your thread. At the moment, we don’t have a way of choosing a column count per device in Page Builder. A simple option might be to create a duplicate row with a different column count, hide it for desktop and display it for mobile. The hiding and displaying per device could be done with the Toggle Visibility addon in SiteOrigin Premium or a plugin like Widget Options.

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 3 years, 10 months ago by shaunbowen.
• This reply was modified 3 years, 10 months ago by shaunbowen.
• This reply was modified 3 years, 10 months ago by shaunbowen.
• This reply was modified 3 years, 10 months ago by shaunbowen.

Hi Shaun,

Thank you for sharing a CSS snippet that allows you to show three columns per row on mobile. ??

Kind regards,
Alex