Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #1475499

    I’m having an issue with the Advanced Layerslider in the Enfold theme. The bottom of the slider is being cut off when the page initially loads. However, if I manually slide forward and backward, the slider displays correctly.

    Here’s what I’ve tried so far to fix the issue:

    Added margin and padding to ensure the entire slider is visible.
    Applied an animation to the slider in hopes of triggering it to reload properly.
    Unfortunately, the issue remains. Has anyone experienced a similar problem or found a solution to ensure the slider displays correctly on the initial page load?

    #1475515

    Hey snitt,
    When I check your page I don’t see that your LayerSlider is cut off, I see that the content slider is cut off due to this error:
    (index):875 Uncaught TypeError: Cannot read properties of undefined (reading 'isMobile')
    from this custom code in your functions.php:

    add_action('wp_footer', 'ava_auto_height');
    function ava_auto_height(){
    ?>
    <script>
    (function($){
    	function c() {
    		   if( $.avia_utilities.isMobile ) return;
    
    		   $('#content-slider-height-same .slide-entry').css('height', '');
    
    		   var elementHeights = $('#content-slider-height-same .slide-entry').map(function() {
    			 return $(this).outerHeight();
    		   }).get();
    
    		   var maxHeight = Math.max.apply(null, elementHeights);
    
    		   $('#content-slider-height-same .slide-entry').height(maxHeight);
    	}
    
    	$(window).on('load', function() {
    	  	c();
    	}).load();
    })(jQuery);
    </script>
    <?php
    }

    Screen Shot 2025 01 21 at 4.16.48 PM
    Is this what you are talking about?
    Changing to this seems to solve after your WP Rocket plugin is cleared:

    add_action('wp_footer', 'ava_auto_height');
    function ava_auto_height(){
    ?>
    <script>
    (function($){
    	function c() {
    		   //if( $.avia_utilities.isMobile ) return;
    
    		   $('#content-slider-height-same .slide-entry-excerpt').css('height', '');
    
    		   var elementHeights = $('#content-slider-height-same .slide-entry-excerpt').map(function() {
    			 return $(this).outerHeight();
    		   }).get();
    
    		   var maxHeight = Math.max.apply(null, elementHeights);
    
    		   $('#content-slider-height-same .slide-entry-excerpt').height(maxHeight);
    	}
    
    	$(window).on('load', function() {
    	  	c();
    	}).load();
    })(jQuery);
    </script>
    <?php
    }

    Screen Shot 2025 01 21 at 4.21.57 PM
    I set your code back to the way you had it, please check.

    Best regards,
    Mike

    #1475639

    Hi Mike,

    Thank you for the great help :)
    Yes that’s the issue I’m having. It cuts off at the bottom, so the price boxes don’t show.
    I can see that the issue is solved in browsers like safari and opera, but not always in chrome.

    If I refresh in chrome (inkognito), sometimes it works and sometimes not. Any idea why?

    #1475688

    Hi,
    Please try disabling your WP Rocket plugin and disable Enfold Theme Options ▸ Performance ▸ JS & CSS file merging and compression and enable Enfold Theme Options ▸ Performance ▸ Delete old CSS and JS files and clear any CDN and server cache that you may have enabled. This may that 24 hours to clear.
    Then clear your browser cache and check.

    Best regards,
    Mike

    #1475731

    Hi Mike,
    WP Rocket was disabled and the settings for merging and compression were already disabled,
    but I’ve deleted the old files and emptied all cache including server. Will wait and see if that solves it. Thank you :)

    #1475752

    Hi,

    Thanks for the update, we’ll keep this thread open for you.

    Best regards,
    Rikard

Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.