Content section height

Hi,

Edit the color section, add a unique Section ID to it, “custom-section” for example then add this in the functions.php file:

// custom section height fix
add_action('wp_footer', 'ava_custom_script');
function ava_custom_script(){
?>
<script>
(function($){
	$.fn.avia_browser_height_mod = function()
	{
		if(!this.length) return;

		var win			= $(window),
			html_el		= $('html'),
			subtract	= $('#wpadminbar, #header.av_header_top:not(.html_header_transparency #header), #main>.title_container'),
			css_block	= $("<style type='text/css' id='av-browser-height-mod'></style>").appendTo('head:first'),
			sidebar_menu= $('.html_header_sidebar #top #header_main'),
			full_slider	= $('.html_header_sidebar .avia-fullscreen-slider.avia-builder-el-0.avia-builder-el-no-sibling').addClass('av-solo-full'),
			calc_height = function()
			{
				var css			= "",
					wh100 		= win.height(),
					ww100 		= win.width(),
					wh100_mod 	= wh100,
					wh95_mod    = Math.round( wh100 * 0.95 ),
					wh95		= Math.round( wh100 * 0.95 ),
					solo		= 0;

				if(sidebar_menu.length) solo = sidebar_menu.height();

				subtract.each(function(){ wh100_mod -= this.offsetHeight - 1; });
				subtract.each(function(){ wh95_mod -= this.offsetHeight - 1; });

				var whCoverMod	= (wh100_mod / 9) * 16;

				//fade in of section content with minimum height once the height has been calculated
				css += ".avia-section.av-minimum-height .container{opacity: 1; }\n";

				//various section heights (100-25% as well as 100% - header/adminbar in case its the first builder element)
				css += ".av-minimum-height-100 .container, .avia-fullscreen-slider .avia-slideshow, #top.avia-blank .av-minimum-height-100 .container{height:"+wh100+"px;}\n";
				css += "#custom-section .container	{height:"+wh95+"px;}\n";
				css += "#custom-section.avia-builder-el-0 .container {height:"+wh95_mod+"px;}\n";
				css += "#top .av-solo-full .avia-slideshow {min-height:"+solo+"px;}\n";

				//ie8 needs different insert method
				try{
					css_block.text(css);
				}
				catch(err){
					css_block.remove();
					css_block = $("<style type='text/css' id='av-browser-height'>"+css+"</style>").appendTo('head:first');
				}

				setTimeout(function(){ win.trigger('av-height-change'); /*broadcast the height change*/ },100);
			};

		win.on( 'debouncedresize', calc_height);
		calc_height();
	}

	$(document).ready(function()
    {
	//calculate the browser height and append a css rule to the head
	if($.fn.avia_browser_height_mod)
		$('#custom-section').avia_browser_height_mod();
	});
})(jQuery);
</script>
<?php
}

If you specify your own Section ID, make sure to replace all instances of the “#custom-section” selector in the code above. If you’re not satisfied with the height, adjust the multiplier (default: 0.95) on this line:

wh95_mod    = Math.round( wh100 * 0.95 ),
					wh95		= Math.round( wh100 * 0.95 ),

UPDATE: Make sure that the “Section Minimum Height” of the color section is disabled or is set to “No minimum height”.

Best regards,
Ismael