Problems with 100% Stretch

Hi!

Did it work for you? You can also try to change the condition to “$.avia_utilities.isMobile”.

Best regards,
Ismael

Hey!

Did your modification work the way you expected? Like this:

if($.avia_utilities.isMobile)
			{
				subtract.each(function(){ wh100_mod -= this.offsetHeight - 1; });
			}
			else
			{
				subtract.each(function(){ wh100 -= this.offsetHeight - 1; wh100_mod -= this.offsetHeight - 1; });
			}

Regards,
Ismael

Hi!

Did you set the border color to white? You can’t see the toggle signs and the toggle border because the border color is set to white. Please adjust the color in Enfold > General Styling > Main Content panel > Border colors. What happen if you use the default shortcodes.js file? Relocating the shortcodes.js file in the child theme is not update-proof and it actually defeats the purpose of using a child theme because once we change something in the original file, the site will still be using the old version of the file in the child theme so you have to override it again with the new file. Please add the modifications in the parent theme files then create a change log in case you update the theme again. And yes, unfortunately, you have to do the modifications every time you update the theme.

Best regards,
Ismael

Hey!

Please try to disable the modifications temporarily then use in the functions.php file:

// color section height
add_action('wp_footer', 'ava_custom_section_height', 50);
function ava_custom_section_height(){
?>
<script>
(function($){
    $(window).resize(function() {
        $.avia_utilities = $.avia_utilities || {};

        if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) && 'ontouchstart' in document.documentElement)
    	{
    		$.avia_utilities.isMobile =  true;
    	}
    	else
    	{
    		$.avia_utilities.isMobile =  false;
    	}

		var win		= $(window),
		calc_height = function() {

			var subtract	= $('#wpadminbar, #header.av_header_top:not(.html_header_transparency #header), #main>.title_container'),
				wh100 		= win.height();

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

			$('.av-minimum-height-100, .av-minimum-height-100 .container').css({
                'height' : wh100,
                'overflow' : 'hidden'
            });
		}

        if(!$.avia_utilities.isMobile) {
            win.on( 'resize', calc_height);
    		calc_height();
        }

    }).resize();
})(jQuery);
</script>
<?php
}

Let us know if it works.

EDIT: We modified the code a bit.

Best regards,
Ismael

Hi!

Please create a duplicate of the home page somewhere then we’ll test the script. What happens when you change this line:

'height' : wh100,

… to this?

'min-height' : wh100,

A screenshot of the issue will help as well.

Regards,
Ismael

Hi!

I activated the script and the scroll down arrows are visible. Screenshot:

The arrow points to the actual scroll down arrow and the height property added to the color section container.

Cheers!
Ismael

Hey!

We modified the code a bit so that the color section container’s height is the same as the parent container.

Cheers!
Ismael