Michael Kwan

I write stuff

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

Spread the love
  • 1
  •  
  •  
  •  
  •  
  •  
  •  
  •  
    1
    Share

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:

visual-composer-post-grid-mobile-onecolumnOne 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.

visual-composer-post-grid-options

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%

visual-composer-post-grid-mobile-twocolumnsSO. 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!


Spread the love
  • 1
  •  
  •  
  •  
  •  
  •  
  •  
  •  
    1
    Share
  •  
    1
    Share
  • 1
  •  
  •  
  •  
  •  
  •  
  •  
  •  

Michael

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

  1. Hi Michael,

    Thank you for this post, I have the same problem but can’t seem to fix it.
    Also your code doesn’t seem to work.

    Could you maybe help me out?

    1. Hi, yeah that’s the whole point of this post… did you try the steps I outlined, and where do you encounter any problems?

  2. Hey Michael, does this same method work for image galleries? I haven’t been able to make 2 columns on mobile for image galleries.

    1. Hmm that’s a different thing altogether – VC Image Galleries show only one image at a time, so you can’t just use CSS to show more. You could technically amend the code itself, but I find the easier way around is to just use a Carousel element instead, assuming that’s what you were going for. Does this help?

      PS sorry for the late reply, I was on holiday last week 🙂

    1. Hi Romeo! I don’t see the custom CSS firing on your .vc_col-sm-6 class – did you skip this part?
      @media only screen and (max-width: 479px) {
      .vc_col-sm-6 {width: 50%; display:inline-block !important;}
      }

    2. Seems to have a possible conflict with your mobile settings – I see a vc_col_xs-12 firing in there somewhere. If I recall correctly I didn’t have any special mobile settings, but I’m not entirely sure, this post was written a few months back and I didn’t need to use it again till now so my memory’s a bit fuzzy.

    1. Hey, sorry for the late reply. It seems you’re using 6 grid items for your full desktop version and bringing it down to 2 columns in mobile, so your CSS should be:

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

      I don’t see any custom CSS firing on your page specific to the above so did you follow those instructions? Remember to clear cache too.

      Update: See screenshot here, once I added in the correct CSS the products show just fine, so this is most likely the problem, as best as I can see without admin access: //snag.gy/XhSl8F.jpg

      Hope this helps.

      1. Try changing the css code to

        @media only screen and (max-width: 479px) {
        .col-half-gutter {width: 50%; display:inline-block !important; padding-top: 0px;}
        }

        In your case it’s because it’s a modified VC plugin so they used a different CSS class which naturally invalidated my code. You can also replace .col-half-gutter with .col-lg-3, see which works best for you. Hope this works!

  3. Hello, and do you maybe have an idea, how to display single images that are implemented in a row inline on mobile devices?
    Best

    1. Whoops I didn’t see this comment earlier. For those, just go to the Column settings and edit the Responsive tab.

Leave a Reply

Your email address will not be published. Required fields are marked *

Back to top
Malcare WordPress Security