Docs

[Damageplan]

Hi there,

I’m trying to hide some columns on mobile device with new VC column settings Width & Responsiveness, but it doesn’t work. Can you please guide me?

Thank you
Matthias

[Christopher]

Hi there,

Please provide us with URL .
To set visibility rules please check http://theme.co/x/demo/integrity/1/shortcodes/responsive-visibility/

Hope it helps.

[Damageplan]

Hi there,

URL is http://www.mkrecording.de/home-2/

I mean the column settings, please see attached screenshot.

Cheers
Matthias

[Christian]

Hey Matthias,

Upon checking your site and shrinking the browser, your contents disappear. With that said, the responsive visibility does work. If that behavior is not what you want, please give us access to your WordPress admin and FTP.

Thanks.

[Damageplan]

Hi,

no, sorry, it doesn’t.
That was my fault, i’ve still set the visibility tag.

But I want to set visibility according to the column settings from above screenshot.
How does that work?
Please check the URL again, now you can see, that it doesn’t work.
I’ve check “Hide” on column settings (see above screenshot).

Thank you again
Matthias

[Damageplan]

I’ve found another thread with the same problem:
https://theme.co/x/member/forums/topic/visual-composer-column-settings-width-responsiveness/

His question is also unanswered.
How do the column settings work without using the [visibility] shortcodes??

Thanks
Matthias

[Rad]

Hi there,

Visibility is not directly related to columns. And columns always requires a row( a content band ). So you should be add the content band first at your visibility shortcode.

It’s just a matter for forming a correct rows column hierarchy. If you wish to have different visibility per column then add visibility to that column, then add container or another content band with fullwidth column (within this is your content). This creates a nested structure within a column,.

The simple rule is, visibility should wrap the content you need to control. This control what to show on desktop, on phone, and on tablet.

Two example here 🙂

[vc_row][vc_column width="1/1"][visibility type="hidden-phone"][vc_row_inner][vc_column_inner width="1/2"][text_output]Im a text[/text_output][/vc_column_inner][vc_column_inner width="1/2"][text_output]Im a text[/text_output][/vc_column_inner][/vc_row_inner][/visibility][/vc_column][/vc_row]

[vc_row][vc_column width="1/2"][visibility type="hidden-phone"][vc_row_inner][vc_column_inner width="1/1"][text_output]I'm content within the content band with fullwidth column, well you can set more columns if you need to :)

[LEFT COLUMN VISIBILITY][/text_output][/vc_column_inner][/vc_row_inner][/visibility][/vc_column][vc_column width="1/2"][visibility type="hidden-phone"][container][text_output]Im a content within container, and sorry I don't have columns :|

[RIGHT COLUMN VISIBILITY][/text_output][/container][/visibility][/vc_column][/vc_row]

You can use no matter what structure you like.

If you like to have same content on both mobile and desktop but wish to have different structure. Then compose different structures within visibility (duplicating the content/information)

X uses it’s own visibility shortcode than the options showing at your screenshot, for the reason that X shouldn’t be relying too much on the plugin. That even if VC is disabled, it will still work. Some user uses standard format as they want VC disabled for performance purposes.

Hope this helps.

[Author]

Posts