Support » Plugin: Page Builder by SiteOrigin » Problem with columns in mobile

  • Resolved pediaf

    (@pediaf)


    Hello, I would like to know how I can change the responsive configuration of the columns on mobile, I have a 7-column structure, I would like 3 columns to be seen on tablets and 2 columns on smartphone, but by default in 780px it becomes 1 column, leaving a huge white space on the right, how can I do this?

    I tried to use the advice from https://siteorigin.com/thread/widgets-in-two-columns-mobile/ but in the second column I find the title of the image, and not the other image.

Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Author Andrew Misplon

    (@misplon)

    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 8 months, 3 weeks ago by shaunbowen.
    • This reply was modified 8 months, 3 weeks ago by shaunbowen.
    • This reply was modified 8 months, 3 weeks ago by shaunbowen.
    • This reply was modified 8 months, 3 weeks ago by shaunbowen.
    Plugin Contributor alexgso

    (@alexgso)

    Hi Shaun,

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

    Kind regards,
    Alex

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Problem with columns in mobile’ is closed to new replies.