Tabs are not responsive :(

Hello,

We are working on this and we will release this fix in our Next Update. Thanks for your Patience.

Meanwhile, do let us know if we can help you with anything else or if you find any further issues with Canvas.

Hello,

We have almost fixed this and will be releasing an Update within this week. Thanks for your Patience.

Meanwhile, do let us know if we can help you with anything else or if you find any further issues with Canvas.

Hello,

We Really Apologize about the Delay in releasing the Update. [sb_private_reply]One of Our Macbooks has crashed which had some important files for the Update and we are working on fixing this up as soon as possible so that we can release the Update at the earliest. Meanwhile, you can do this yourself.[/sb_private_reply]

1. Please find the tabsJustify: function() Function Block in the js/functions.js File and add the following code just after the Function Block just like the other Function Blocks:

tabsResponsive: function(){

	if( !$().tabs ) {
		console.log('tabs: Tabs not Defined.');
		return true;
	}

	var $tabsResponsive = $('.tabs.tabs-responsive');
	if( $tabsResponsive.length '+navElContent+'');
		});
	});
},

tabsResponsiveResize: function(){

	if( !$().tabs ) {
		console.log('tabs: Tabs not Defined.');
		return true;
	}

	var $tabsResponsive = $('.tabs.tabs-responsive');
	if( $tabsResponsive.length < 1 ) { return true; }

	$tabsResponsive.each( function(){
		var element = $(this),
			elementAccStyle = element.attr('data-accordion-style');

		if( $('body').hasClass('device-xs') || $('body').hasClass('device-xxs') ) {

			element.find('.tab-nav').addClass('hide');
			element.find('.tab-container').addClass('accordion '+ elementAccStyle +' clearfix');
			element.find('.tab-content').addClass('acc_content');
			element.find('.acctitle').removeClass('hide');
			SEMICOLON.widget.accordions();

		} else if( $('body').hasClass('device-sm') || $('body').hasClass('device-md') || $('body').hasClass('device-lg') ) {

			element.find('.tab-nav').removeClass('hide');
			element.find('.tab-container').removeClass('accordion '+ elementAccStyle +' clearfix');
			element.find('.tab-content').removeClass('acc_content');
			element.find('.acctitle').addClass('hide');
			element.tabs( "refresh" );

		}
	});
}

1. Find the SEMICOLON.widget > init: function() Function Block and the following Function Calls just after the SEMICOLON.widget.tabsJustify(); Function Call:

SEMICOLON.widget.tabsResponsive();
SEMICOLON.widget.tabsResponsiveResize();

1. Find the SEMICOLON.documentOnResize > init: function() Function Block and add the SEMICOLON.widget.tabsResponsiveResize(); Function Call just before the SEMICOLON.widget.tabsJustify(); Function Call.

2. Add the following CSS Code in the css/responsive.css File inside the @media (max-width: 767px) Media Query:

.tabs-responsive .tab-container { padding: 0 !important; }
.tabs-responsive .tab-container:not(.accordion-border) { border: 0; }

1. Now you will need to simply add the .tabs-responsive Class to the .tabs Element.

This will definitely work fine. Let us know if we can help you with anything else or if you find any further issues.