Make the Tabs show on the mobile

That did not work for me. It actually took away the tabs. Or at least took away the titles. You can view it here on our stage/test site. https://staging.outdoordogsupply.com/product/garmin-astro-430-t5-perfect-field-dog-bundle/

I would love for it to look as it does in your picture. This is what it looks like without the code you gave me.
https://www.outdoordogsupply.com/product/garmin-astro-430-t5-perfect-field-dog-bundle/

This was the code I put in.
.wpb-js-composer .vc_tta.vc_tta-tabs .vc_tta-tabs-container {
display: block;
}
.wpb-js-composer .vc_tta-color-grey.vc_tta-style-classic .vc_tta-panel .vc_tta-panel-heading {
display: none;
}

Hello There,

We need !important to make it on top priority. Try this CSS instead:

body .vc_tta.vc_tta-tabs .vc_tta-tabs-container { display: block !important; }
body .vc_tta.vc_general .vc_tta-panel-heading { display: none !important; }

Hope this helps.

Thank you SOO much you rock!!!

You are most welcome. :slight_smile:

I am having one problem with the page going up & down when you click on the tabs. Could you help me fix this? You can see it here on our stage site.

https://staging.outdoordogsupply.com/product/sportdog-replacement-antenna-long/

It jumps down and then scrolls back up a little when you click on the tabs on the desktop. Very weird.

Also the tabs do not seem to be working on the mobile. I’m not sure if that’s you guys or review company but I just wanted to point it out just in case it is something you can help me fix. The mobile also seems to be doing the up and down thing when the links tabs work.

Hi

There is a bug when it comes to scrolling feature of the Visual Composer when used in the Tab element. Please kindly go to X > Theme Options > JS and add the code below:

jQuery( function($) {

  $(document).on('touchstart click', 'li.vc_tta-tab a,li.vc_tta-tab,.vc_tta-panel-title', function(){
     $('html, body').stop();
  });

});

The code above will disable the scrolling feature of the Visual Composer Tab which has the bug.

Now, regarding the Tab feature of the Visual Composer in Mobile devices, whatever we give is a band-aid and a patch that might break at some point. The Tab feature of the Visual Composer is not meant to be used on mobile devices, and it is recommended to have it as it is, which shows all the content. Alternatively, you can hide the tab entirely for mobile devices and use another method to display the information on mobile devices.

As an alternative you can recreate the page with the Cornerstone plugin which has a better Tab element. I suggest that you add a test page and use the Cornerstone plugin to add the Element Tab and see if it fits your needs. If yes, then you can recreate the page with that plugin. Please consider that you can not use both Cornerstone and Visual Composer on the same page. You need to use one of them per page.

Also, by Visual Composer I mean the WP Bakery Page Builder. And, I would have a complete backup of my website if I were to recreate the page with Cornerstone.

Thank you.

So I’m willing to try Cornerstone but I can’t figure out how to get elements in the tabs. How would I remake what I have now. I really wish there was just away to fix what I have now. When you click on the tabs on the mobile and they don’t do anything if you refresh the page it goes to the tab you clicked on. Is there no way to fix what I have now?

Hey @odsadmin,

Currently, you can’t add elements inside the Tab element but it has no problem in mobile.

Regretfully, we could not offer much help for this as you’re using a native feature of Visual Composer which our theme does not support.

I’d recommend that you consult with a third-party developer if you wish to continue with this setup,

Thank you for understanding.

Is there short code for the functions I have in the tabs?

Or better yet would there be away on the mobile to have them open like you are saying they need to be but you can click the tab at the top and it brings you to that spot? Kinda like an anchor. Maybe?

If not I could use Cornerstone I just need short code for all the functions I have in those tabs.

Hello @odsadmin,

How did you added the tabbed contents? If you added the contents manually, you should be able to copy and paste it in Cornerstone’s tabbed content element. I am not sure how it looks like. Maybe if you can provide access to your site, I might be able to help you. Please provide us your WP credentials in a secure note so that we can check it.

Thank you in advance.

Hey RueNel,
If I post to this will it show my username and password to the public? I do not see the hide or make privet box.

Hi @odsadmin,

Unfortunately, the jumping will still happen since as it switches to different tabs, it also changes the height. Hence, scrolling would not really be going to scroll to the correct spot.

And this appears to be created with Ultimate Addon plugin for visual composer, and you can’t mix both cornerstone and visual composer just to change the tab. It would require full rework of the product pages which may not worthy since the scrolling at the end would still jump up and down due to changing height. Doable and fixable but that would require much customization we can’t provide here in the forum.

Thanks!

Ok. So I tried a different idea and put an accordion that will show on the mobile only. But I am having trouble with the description not showing with the accordion. I don’t understand why. I went to ask Ultimate Addon WP Bakery and they told me that it is a WP Bakery problem and I would have to ask them Not an Ultimate problem. Well being that I go that plugin with the theme I do not have a key to give them so I can not get to there support form. Could you please help me. I just don’t understand why it is not working in the accordion. But the description will work on the tabs.

Hello @odsadmin,

I have logged in and edited the mentioned pages. There isn’t a preview of the page. Could you please apply this template to one of your products so that we can see it in action and investigate the accordion?

Thank you in advance.

Sorry it has taking me so long to get back to you I was out of town.

You should be able to view this on most of our products but here is a link.
https://staging.outdoordogsupply.com/product/sportdog-replacement-antenna-long

It does not seem to be working still on the mobile. You can open the tab/accordion but there is nothing there.

Hi @odsadmin,

Your version of X and Cornerstone is not compatible. Your version of X (6.2.5) is outdated, please update that first to make sure this is not an incompatibility issue because your Cornerstone and VC is already in the latest version (3.5.5 & 6.0.3 respectively)

Updating Your Themes and Plugins
Version Compatibility

Remember to clear all your caching features (plugin, server-side, CDN, and browser’s cache) after updating so that the code from the latest release is always in use. This will help you to avoid any potential errors.

Let us know how it goes,
Cheers!

I updated the Theme and it broke a lot of stuff on my site. My options sets are not working nor do my page layouts. Plus it did not fix the description. It is still not showing on mobile. There is a lot more that is not working but that is what I see right at first.

It looks like something in the WooCommerce portion could be CSS. When we compare our live site to our stage we found a large chunk of CSS changes. We copied it and put it into the CSS Override in the theme options on or stage site but that did not fix it.

Hi @odsadmin,

I checked and I couldn’t understand the setup and none of this is part of the theme structure, appears to be a custom made product structure. The best way to solve this description issue and other issues are to contact a developer or the plugin author to see what’s really going on.

Plus, it could be the description is outside the post loop or wrapped in the shortcode in which it’s not properly executed. I recommend contacting the author who’s familiar with this setup.

Thanks for understanding.

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.