Docs

[Johan v]

Hi there,

It’s about this page: http://studio2harkema.nl/studio-2-harkema/
The second image (the woman image with a lower opacity), i would like to hide it when visitors are viewing it on mobile.

Is that possible?

– Johan

[Rahul]

Hi,

For elements in cornerstone, 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.

http://screencast.com/t/lHetWx8GDLN9

You can do the same for other elements.

Note: You need to enable advanced controls for the class field to appear.

Hope that helps.

[Johan v]

Hi there Rahul,

I don’t get that one as you can see here: http://puu.sh/psUDM/52cda62b66.jpg
I know the:

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

But there seem no option for that background image

[Rupok]

Hey Johan,

Thanks for updating. So you want to hide the background image only, for mobile? In that case you can add this under Custom > CSS in the Customizer.

@media only screen and (max-width: 767px) {
.page-id-79 #x-section-1 {
  background: #fff!important;
}
}

Hope this helps.

Cheers!

[Johan v]

Thank you so much Rupok!
Makes my day!

[Joao]

Great to hear it

Let us know if you need help with anything else.

Joao

[Author]

Posts