Convert 2 columns to 1 on mobile with WPBakery page builder

[Hudsonpilot]

Hi, Can you help me convert 2 columns to 1 on mobile devices with WPBakery page builder? Here’s the page I’m working on:

https://staging1.upstatefilms.org/essential-grid-test-now-playing

In the top row, there’s a row with 2 columns, one for Playing in Rhinebeck (which has a 2-column grid) and one for Playing in Woodstock. In order to prevent the grid blocks from getting too narrow, I want the column for Playing in Woodstock to shift its position to below the Playing in Rhinebeck for tablets. (It already does this automatically for phones.) I can’t figure out how the column settings work in the Page Builder, or maybe this is something for CSS.

Also, is there some way to make the tables in this grid responsive, so that they squash and stay within the grid?

Thanks for any help you can provide.

[christopher]

Hi Steve,

We recommend that you use the Cornerstone page builder with our theme. It is ok to use the WPBakery page builder, but you will need to make sure you use it in a responsive way.

I can not see the options that you used, but it seems that you added hard widths for the grids inside the columns and that is why it is not responsive.

I suggest that you learn more about responsive usage here:

WPBakery Page Builder Responsive Design

Thank you.

[Hudsonpilot]

Thanks for this help. I would use Cornerstone, as I’ve done on my other X sites, but I’m running into a conflict between Cornerstone and Content Views. On the original site (not in X), when I activate Cornerstone, CV shows the whole post content rather than just the content before the “read more” break inserted into the post. For example, on this page, https://upstatefilms.org/coming-soon-films, the posts break off at the read-more break, but when Cornerstone is activated, the page shows full post content.

This problem does not occur on the staging site: https://staging1.upstatefilms.org/coming-soon-films.

I’m concerned that if I build pages in Cornerstone on the staging site, I’ll run into this same problem when I activate Cornerstone on the main site. Any suggestions?

[Hudsonpilot]

Also, I cannot use Cornerstone on the staging site because I’m getting this notice:

[Hudsonpilot]

I have also been able to replicate this same conflict between Content Views and Cornerstone on my other X theme sites. With Cornerstone activated, the posts in CV show full content even though there’s a manual read-more break; when Cornerstone is deactivated, the CV shows only the content before the break. (CV is set for “full post.”)

[Hudsonpilot]

I see from reviewing the support forum that the problem of using Cornerstone on a Siteground staging site has been discussed several times before. I’ve tried some of the recommended solutions, but nothing works. Rather than dealing with this issue, I’d appreciate it if you could look into the other issue, the conflict between Cornerstone and Content Views. If you like, I can start a new thread on this. Thanks, as always, for your assistance.

[friech]

Hi Steve,

Yes sure, please write that issue on a new thread so we can do a separate investigation on that issue, but if that is really a plugin conflict issue, please contact the plugin author as we can not provide support for 3rd party plugin conflict.

Now to your column issue, please add a class my-two-third to the left column (Playing in Rhinebeck) and a class my-one-third to the right column (Playing in Woodstock).

After you assigned that classes to your columns, please add this to your page CSS.

@media (min-width: 768px) and (max-width: 979px) {
	.my-two-third,
	.my-one-third {
		width: 100% !important;
	}
}

You can easily do this in Cornerstone with the new Column Layout feature.

Layout Tricks: Auto-Responsive Columns.

Hope it helps,
Cheers!

[Hudsonpilot]

Your solution to the column issue worked perfectly. Thank you very much!

[Prasant]

You are most welcome.