
-
AuthorPosts
-
January 21, 2025 at 3:28 pm #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?January 21, 2025 at 10:24 pm #1475515Hey 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 }
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 }
I set your code back to the way you had it, please check.Best regards,
MikeJanuary 23, 2025 at 11:42 am #1475639Hi 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?
January 23, 2025 at 10:41 pm #1475688Hi,
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,
MikeJanuary 24, 2025 at 1:38 pm #1475731Hi 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 :)January 24, 2025 at 6:19 pm #1475752Hi,
Thanks for the update, we’ll keep this thread open for you.
Best regards,
RikardJanuary 27, 2025 at 3:08 pm #1475862Hi,
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 :/
January 28, 2025 at 7:15 am #1475903Hi,
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,
IsmaelJanuary 29, 2025 at 2:51 pm #1475973Hi,
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!
January 30, 2025 at 6:47 am #1475997 -
AuthorPosts
- The topic ‘Issue with bottom of being cut off in Advanced Layerslider’ is closed to new replies.