Home>Support>Aligning columns on mobile

Aligning columns on mobile

Hi, I am building a site that has 6 – 8 columns side by side in a row.

1. Is it possible to adjust the number of columns shown on the mobile side by side?
I would prefer to show 2 – 4 columns (images) side by side.

2. Is it possible to exclude the 1st column from the row, when defining rules for mobile (see para 1)?

I read this thread – https://wordpress.org/support/topic/problem-with-columns-in-mobile/. Tried it, but the columns did not resize.

Divi has these options, but it is very slow. Could switch to Siteorigin Premium, if that offers any bonuses in this regard.

+Hiding elements on mobile or creating a separate pages for mobile is not an option, as I have ~ 40 – 60 images in columns.

This is our free support forum. Replies can take several days. If you need fast email support, please purchase a SiteOrigin Premium license.

  1. 23 days, 40 minutes ago Andrew Misplon Hi, I Work Here

    Hi Mints

    Thanks for reaching out.

    1. Is it possible to adjust the number of columns shown on the mobile side by side?

    When editing a row in the Layout section on the right you can set the collapse behavior and the order. Unfortunately, it isn’t possible to set columns per device/resolution.

    2. Is it possible to exclude the 1st column from the row, when defining rules for mobile (see para 1)?

    It is using Custom CSS, that’s something we can assist with within our premium support scope. If you’re using SiteOrigin Premium you could also consider the Toggle Visibility addon which lets you hide/show widgets or rows based on the device in use.

    If Toggle Visibility wouldn’t help due to the size of the page you mentioned and if there is a recognizable pattern like excluding the first column from every row on mobile then that’s something we could write up for you within our premium support scope.

  2. 22 days, 20 hours ago Mints Masans

    Couldn’t row behavior and responsiveness be set with CSS?
    Divi support team sent me this code to resize 6 columns on mobile to 3 in one row:

    @media only screen and (max-width: 980px) {
    .et_pb_row_6col .et_pb_column {
    width: 16%!important;
    }
    }
    @media only screen and (max-width: 479px) {
    .et_pb_row_6col .et_pb_column {
    width: 30%!important;
    }
    }

    Would this code work on Siteorigin?

  3. 22 days, 20 hours ago Andrew Misplon Hi, I Work Here

    Hi, the CSS is specific to Divi class names. This task could be achieved with Custom CSS but is, unfortunately beyond our free support. We can assist with any standard functionality questions and basic troubleshooting here on the forum.

  4. 21 days, 18 hours ago Mints Masans

    Hi, Andrew!
    Do you plan to introduce the feature to choose column counts for mobile or to integrate the solution given here – https://wordpress.org/support/topic/problem-with-columns-in-mobile/ ?

  5. 21 days, 18 hours ago Andrew Misplon Hi, I Work Here

    Hi Mints, thanks for your reply. We’re working on various new widgets and features at the moment, this, unfortunately, isn’t one of them.

  6. 19 days, 6 hours ago Mints Masans

    Hi, Andrew!
    How does Toggle Visibility work in Google PageSpeed tests? Is the add-on able to completely hide modules without reducing the performance score?

    I ask because in Divi when I use such an approach, there is sometimes a glitch and on slower connections, it can be seen that page resizes to a different version.

    In my case, that would mean to hide 4 – 7 rows with 6-8 columns in each and display a simple table for mobile users.
    Thus, in practice there would be two front-page versions – a) for desktop, b) for mobile users.

  7. 18 days, 21 hours ago Andrew Misplon Hi, I Work Here

    Hi Mints

    For your situation, a Custom CSS fix would be preferable.

    With regards to performance, the content is loaded in the page even when hidden so the speed impact would depend on the type of content being loaded. Text vs large images for example.

    You can view a brief demo of the Toggle Visibility addon here.

  8. 18 days, 20 hours ago Mints Masans

    I upgraded to premium and filled support ticket. I hope your colleagues will be able to help with this issue.

  9. 18 days, 20 hours ago Andrew Misplon Hi, I Work Here

    Thanks for your support, we hope you find SiteOrigin Premium useful for your site. Once the plugin ZIP file is downloaded to your desktop you can install it from PluginsAdd New. Once activated, go to SiteOriginPremium License within WordPress to activate. An active license ensures you receive SiteOrigin Premium updates as we release them about once a month. As questions arise, please, send us an email, we’ll assist from there. Cheers :)

Replies on this thread are closed. Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.

Get The Most Out of SiteOrigin with SiteOrigin Premium

Find Out More