Viewing 10 posts - 1 through 10 (of 10 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

    #1475862

    Hi,
    I’ve reviewed the page in Chrome, both in normal and incognito mode, and it is still being cut off at the bottom.
    Since the customer is also using Chrome, it’s problematic that this happens.

    The issue still only “resolves” if you use the navigation arrows to go forward and back, but the problem still occurs on the initial page load :/

    #1475903

    Hi,

    Thank you for the update.

    The same error occurs when we checked. Did you comment out the suggested line above?

    if( $.avia_utilities.isMobile ) return;
    
    

    Remove the line or replace it with:

    //if( $.avia_utilities.isMobile ) return;
    
    

    Best regards,
    Ismael

    #1475973

    Hi,
    Thank you for checking. The problem sees to be fully solved now!
    I initially thought the code was already fixed earlier, so I overlooked the fact that I needed to apply the changes again.
    That was my mistake, sorry.

    I have now removed the added code (if( $.avia_utilities.isMobile ) return;) in functions.php of the child theme,
    disabled lazy load, and cleared the cache and deleted all old files again.
    Now, the site is rebuilding its cache, and the slider is displaying correctly in Chrome as well.

    Thanks again for your help!

    #1475997

    Hi,

    Great! Glad to know the issue has been resolved. Let us know if you have more questions.

    Have a nice day.

    Best regards,
    Ismael

Viewing 10 posts - 1 through 10 (of 10 total)
  • The topic ‘Issue with bottom of being cut off in Advanced Layerslider’ is closed to new replies.