How to show two columns on Visual Composer Post Grid for mobile

Visual Composer for WordPress is a lifesaver when it comes to web design these days. It makes designing page layouts a hundred times easier compared to writing code, and I’ve been using it for many years now. However it can be a real b**** at times, especially when moving between desktop to mobile.

A commonly-encountered problem is the Post Grid element showing one element per column, which most times looks pretty ridiculous:

One column layout on Post Grid. Bloody annoying.

Yeah this looks pretty stupid, since there’s plenty of space to show two logos per column. Unfortunately there’s no such option in Post Grid, and all my life I had to deal with it.

Until now.

The solution

First, go to your Post Grid settings and check how many grid elements per row you are using.

Next, go to your Custom CSS page (I assume you have one in your Theme Options – else the Visual Composer Custom CSS page should do), and paste the below code:

@media only screen and (max-width: 479px) {
.vc_col-sm-6 {width: 50%; display:inline-block !important;}
}

The above code works with 2 grid elements per row, as per the picture. If you use more or fewer grid elements, replace the code accordingly:

6 grid elements = .vc_col-sm-2
4 grid elements = .vc_col-sm-3
3 grid elements = .vc_col-sm-4
2 grid elements = .vc_col-sm-6
1 grid element = .vc_col-sm-12

And of course, if you want to show more than 2 columns:

2 columns = 50%
3 columns = 33%
4 columns = 25%
5 columns = 20%
6 columns = 16.667%

SO. MUCH. BETTER.

I hope this has helped you, and if you are having trouble with your code, do comment below and I’ll try my best to help. Disclaimer: I’m no programmer though, just another regular WP designer like the next guy. But I’ll try my best.

Good luck!