Tab section: Tabs added in new row instead of being aligned horizontally

Hi,

Thank you for the screenshot.

If necessary, we can decrease the size of the font to make the title fully visible on smaller screens.

Add this css code in the Quick CSS field or the child theme’s style.css file.

@media only screen and (max-width: 767px) {
    #top .av-section-tab-title .av-inner-tab-title {
        margin-bottom: 13px;
        font-size: 11px;
    }
}

Please make sure to toggle the Performance > File Compression settings, and remove the browser cache after adding the code.

Best regards,
Ismael

Hi,

Thank you for the update.

If decreasing the font size is not an option, we can then instead modify the themes\enfold\config-templatebuilder\avia-shortcodes\tab_section\tab_section.js file directly and include an additional 20px to the minimum width of the title container.

Look for this code around line 84:

tab_wrap.css('min-width', min_width);

Replace it with:

tab_wrap.css('min-width', min_width + 20);

This is almost the same as using the css code that Victoria suggested above.

Please don’t forget to toggle the Performance > File Compression settings after adding the code.

Best regards,
Ismael

Hi,

Thank you for the update.

You have to create a new path for the shortcodes in the child theme directory by using the “avia_load_shortcodes” filter. Please check the documentation for more info:

// https://kriesi.at/documentation/enfold/intro-to-layout-builder/#add-elements-to-alb

After adding the “shortcodes” folder or path, create a duplicate of the enfold\config-templatebuilder\avia-shortcodes\tab_section folder inside the new shortcodes path, then edit the tab_section.php file. Inside the file, look for the extra_assets function and adjust the script URL so that it points to the new path in the child theme directory.

		function extra_assets()
		{
			//load css
			wp_enqueue_style( 'avia-module-tabsection', AviaBuilder::$path['pluginUrlRoot'] . 'avia-shortcodes/tab_section/tab_section.css', array( 'avia-layout' ), false );
			//load js
			wp_enqueue_script( 'avia-module-tabsection', AviaBuilder::$path['pluginUrlRoot'] . 'avia-shortcodes/tab_section/tab_section.js', array( 'avia-shortcodes' ), false, true );
		}

Related threads:

// https://kriesi.at/support/topic/how-to-make-the-submenu-sticky-on-mobile/#post-1225113
// https://kriesi.at/support/topic/issues-in-adding-custom-code-to-postslider-php-in-child-theme/#post-1230323
// https://kriesi.at/support/topic/content-slider-column-amount/#post-1224986

Best regards,
Ismael