Docs

[Hivebusiness]

How can I achieve hiding rows on specific devices, in the “normal” visual composer there is the option to hide a column per device, however you have stripped out that functionality.

We have Effects > Hide Row, however this doesn’t really work as the row will flash up on a device it’s meant to be hidden on when loaded, then disappear.

Any advice on how I can achieve this would be great!

Thanks

Karl

[Rupok]

Hi Karl,

Thanks for writing in! This option is available on Cornerstone. But we have the classes for the functionality that you an use in Visual Composer as well. You can use the class field to add visibility classes.

Classes:

x-hide-xl – Extra Large | 1200px & Up
x-hide-lg – Large | 980px – 1199px
x-hide-md – Medium | 768px – 979px
x-hide-sm – Small | 481px – 767px
x-hide-xs – Extra Small | 480px & Smaller

So if you want to hide your image element in mobile you can add x-hide-xs class in the class field of your image element. You can do the same for other devices with the respective classes.

Hope that helps.

[Hivebusiness]

Unfortunately I find Cornerstone a pain to work with (quite limiting).

What if I want an item to be hidden on multiple platforms for instance on this page http://hivebusiness.co.uk/dev-marketing/

The 1 2 3 section looks horrid on ipads on portrait so need to remove it. I will need to replace it with something else which will only be viewable on ipad portrait and hidden on everything else.

Cheers

[Joao]

Hi There,

Rupok explained how to do it above,

I am not sure if you still need help.

Let us know in any case.

Joao

[Hivebusiness]

I’m right in thinking that I can’t add multiple classes to one element, so if I hide an element using x-hide-sm it will show on every other size screen won’t it? Or can I add multiple classes in Visual Composer?

Cheers

Karl

[Christian]

You can add multiple classes separated by spaces like x-hide-xs x-hide-sm (see attachment).

Thanks.

[Hivebusiness]

hopefully last question,

how can I target just one element that displays on ipad only, so I the extra css classes are:
x-hide-xl x-hide-lg x-hide-sm x-hide-xs

But I want to target the element which is:
.cq-expandgrid-facecontent .cq-expandgrid-title

Thanks

Karl

[Christian]

You would need to apply the media queries to that element directly and not use classes like the code below. It would be best to use your own media queries, that would be outside the scope of our support though. And also, the code below serves only as a guide. Issues arising from it or further modifications would be outside the scope of our support.

/* XL */
@media (min-width: 1200px) {
.cq-expandgrid-facecontent .cq-expandgrid-title {
    display: none !important;
}
}

/* LG */
@media (max-width: 1199px) and (min-width: 980px) {
.cq-expandgrid-facecontent .cq-expandgrid-title {
    display: none !important;
}
}

/* MD */
@media (max-width: 979px) and (min-width: 768px) {
.cq-expandgrid-facecontent .cq-expandgrid-title {
    display: none !important;
}
}

/* SM */
@media (max-width: 767px) and (min-width: 481px) {
.cq-expandgrid-facecontent .cq-expandgrid-title {
    display: none !important;
}
}

/* XS */
@media (max-width: 480px) {
.cq-expandgrid-facecontent .cq-expandgrid-title {
    display: none !important;
}
}

Thanks.

[Author]

Posts