HI,
This sounds like how I would usually do it using PRO, however this page is edited with VC to achieve the gallery style we needed (that’s why I’m stuck on this).
Is there a similar setting in Visual Composer I could utilise ?
(as far as I am aware I cannot use both PRO and VC on same page)
Hi there @mellinco,
Thanks for writing back! There are responsive controls for elements within Visual Composer and columns within Visual Composer. There’s a useful tutorial video here: https://vc.wpbakery.com/video-academy/control-elements-different-devices-responsive-column-controls/
However if that doesn’t work out, you could add a new class to the element in Visual Composer, then use a media query to hide the column/element on specific devices.
Thanks!
Hi Jack,
I cannot see those settings following the video. Iv’e looked everywhere I could think they might be as well, but cannot see them anywhere.
It would be great if this is a setting I have overlooked, however - if they are not there,
how would I add a new class to the element and use a media query to hide the column/element on specific devices as suggested ?
Hi there,
Ah, sorry for the confusion from my previous answer. I thought you’re switching to other implementation since VC has issues with tabs.
As for the HIDE BASED ON SCREEN WIDTH, it’s equivalent in VC is by adding Visibility element, then add your other elements within it. I made a video recording.
Thanks!
Hi Guys,
Thank you for the video it was extremely helpful for understanding !
Unfortunately I have not managed to initiate the hide on mobile successfully.
I understand where the setting is and have successfully created hidden from desktop content. However I am unable to create a visibility rule for the 'tabs’ used for the gallery to hide it on mobile.
I am suspecting either this method may not work on ‘tabs’ or it needs to be perhaps done before adding content ? (which is obviously a problem if so as the gallery already exists )
Please let me know in either case so we may continue toward a resolve for this issue, and it would be great if you could tell me how to remove the ‘Enter js’ popup there as I only clicked on it accidentally, and input nothing & didn’t save it in, (yet for some reason it is still publicly visible) so of course obviously this is not needed and will confuse any viewer.
Hi there,
I’ve taken a look at this and can’t seem to locate where the JS is coming from. Can you remember the button you clicked to add that? If possible please attach a screenshot.
Regarding the hiding of the elements, you won’t be able to hide individual tabs using that method, but you could hide the entire section of tabs. Alternatively you can hide the tabs using CSS media queries.
If you can let me know the devices the tabs/tab should be hidden on and I’ll add some media queries for you.
Thanks!
Hi Jack,
the tabs in the gallery page i.e. labeled ‘stainless’, ‘aluminium’ etc. I would really like to have them hidden on mobile devices so we can create an alternate gallery for mobile display.
I am fairly sure the button was just above ‘visibility’ in the backend of VC, while intending to select ‘visibility’ in trying to hide the gallery tabs . pls see att. 
Hi there,
You have to remove that raw javascript if you’re not gonna use it, else, there will be a default content for that, like that pop up. It’s under your Wood tab content.
And yes, you will; have to create the tabs within visibility element, you can’t drag and drop existing element to it, it’s different structure that standard columns/rows.
Thanks!
Hi Guys,
I found and think I have successfully removed the js & subsequent popup.
Is it still possible to hide the current gallery tabs from mobile using media queries as Jack , rather than recreate the entire tabs section and hiding it via visibility functions of VC?
This would be really helpful as making the gallery behave and display how we wanted it to has taken months,
and hiding the existing tabs from mobile seems far more likely to be successful than remaking the desktop gallery again,
and then we can make an alternate simpler gallery for mobile hidden from desktop as planned.
Hi there,
That’s doable by adding classes to your tab section’s Class input. These are the classes you could use
cs-hide-xl cs-hide-lg cs-hide-md cs-hide-sm cs-hide-xs
Example, if you need to hide it from large screen, then add cs-hide-xl to your tab section’s Class input, or hide them from large to medium like this cs-hide-xl cs-hide-lg cs-hide-md. You can do multiple combinations. It’s the same as using media query, but these are re-usable.
Thanks!
These worked awesome thank you !
As planned I have created an alternative gallery using VC accordion with each section using Essential Grid. This has been far more successful ! and at this point we are fairly happy with the result.
To make this work with our existing style -
We would like to change the;
background colour of the accordion from white to transparent,
and if possible;
reduce the space between each accordion tab.
I have been searching around the WPBakery database and CSS support sites, however after not achieving any change, I contacted WPBakery, and they have directed me to you guys - as they have explained that PRO theme css will be in-charge of the above, could you please let me know how to go about making those changes
Hi there @mellinco,
Thanks for writing in!
You can use this css to change the width between tabs:
.wpb-js-composer .vc_tta.vc_tta-spacing-5 .vc_tta-tab {
margin-left: -20px !important;
}
Regarding a white accordion I’m afraid I can’t locate on the gallery page, all I see is the middle gallery section which has a grey background is that what you want to change to transparent?
Thanks!
Hi Jack,
awesome ! thank you for the code 
No its not the gallery that you referenced, (the one using tabs & sliders)
The only reason I can think you might not be able to see the white accordion, (accordion with Ess. Grid content ) is the gallery I wanted to change the white to transparent on, created using the accordion - is only for display on mobile so it will likely only be visible in backend or mobile preview.
Hi there @mellinco,
Thanks! I see it now on mobile devices, you can use the following CSS:
.x-accordion-heading .x-accordion-toggle.collapsed {
background-color: transparent;
}
.x-accordion-inner {
background-color: transparent;
}
.x-accordion-heading .x-accordion-toggle {
background-color: transparent;
}
Note for this, I’m using the background color with the transparent property, but you may want to use an RGBA color background value depending on the desired outcome: https://www.w3schools.com/cssref/pr_background-color.asp
Thanks!
Hi Jack,
That worked perfectly thank you !
The only thing I have left to do is figure out how to stop both the ‘accordion gallery’ and the ‘tabs gallery’ displaying on ’ tablet portrait screen size’.
When I use the ’ cs-hide-lg ’ it’s hiding others screen sizes we dont want it to. When I don’t use it, both galleries show (only on tablet portrait ). Would you be able to please point me in the right direction to fix this.
awesome help with the colour changes thanks again ! *& transparent was what I was after too so that worked well !
Hi There,
x-hide-xs = 480 & smaller
x-hide-sm = 481px to 767px
x-hide-md = 768px to 979px
x-hide-lg = 980px to 1199px
x-hide-xl = 1200px & up
You can use x-hide-sm and x-hide-md
Hope it helps
Awesome Joao, this nailed it. Thank you !
& thanks for the sizes too ! they are super useful and not so easy to find
I’m trying to figure out if the ‘Load more’ button in essential grid, can be made transparent to match the rest of the gallery layout. Could you please let me know if these is a way to do this - I will update if I find it.
Additionally - having trouble with the images loading slowly in the accordion. I am testing various settings i.e. ‘medium’ ’ entry’ etc. but its a bit of a guessing game as these don’t really define what size things like ‘entry’ and ‘entry cropped’ are , I would assume ‘entry’ means ‘original size’ , but of course it doesn’t as there is an ‘original size’ setting.
Hi there,
Please add this as well,
.esg-loadmore {
background: transparent !important;
}
Yes, with many items in there, it will be a bit slow but not too much. And since you’re only displaying it for mobile, small or medium should be enough.
Thanks!
Thank you ! & worked perfectly.
I think we have finally resolved all the issues we were up against with this page.
Thank you for all your help on a tricky problem.
Im stoked we could get it all worked out & running to the clients requirements. 
