Search code examples
wordpresswordpress-themingvisual-composer

Mobile view on iPad (Visual Composer / WordPress)


I have a situation and need help with Visual Composer in WordPress. I have a ROW with 3 columns. In desktop and iPad it shows normal with 3 columns.

Imagine like this X X X

On mobile it shows 1 column per row!

X

X

X

I want columns to stack on iPad view as on mobile. How can I achieve this with Visual Composer?

Can anyone show me the steps. I believe I have to play with Responsive Options on Inner Column Settings...


Solution

  • You can change how the columns stack from the Responsive Tab. When you create a row, on the left side there is a long hamburger menu. Click on it and you will be able to create columns. After you create columns, each column has a +(add), pen(edit) and an x(remove/delete). Click the pen to edit the column. Now there is a tab called Responsive Options. This works like bootstrap since it was built on bootstrap. For Tablet make the first-row width - 12 columns and on the medium size make it 4 columns so they go on one row at 992px.

    The responsive media queries for VisualComposer are

    small - 768px medium - 992px large - 1200px

    Visual Composer/WpBakery Responsive Options