Full width layer slider on mobile devices max height

Hey marcusss,

Thank you for the inquiry.

The css is actually working correctly, although it doesn’t affect the caption container because it is always shorter than the specified maximum height. Please check the screenshot in the private field.

What are you expecting with the css code above?

Best regards,
Ismael

Hi,

Thank you for the info.

It is actually working but you might be confusing max-height with the min-height or the height properties. Please note that the max-height property is used to control the height of an element so that it doesn’t go taller or beyond the specified value. The actual height of the slider doesn’t reach that limit or it doesn’t go taller than 480px on mobile view.

Are you trying to keep the height of the slider to 480px even on smaller screens? Try to replace max-height property with min-height or just height.

Best regards,
Ismael

Hi,
Thank you for your patience, I disabled the css for the homepage because I came up with another solution, this script calculates the height of each of your slides and makes them all the same height, it needs to be added to the end of your child theme functions.php file in Appearance ▸ Editor, but this option is hidden right now for me so you will need to add it:

function custom_script() { ?>
    <script>
(function($){
  $(window).load(function(){
  	$('#top.home #full_slider_1 .avia-slideshow-inner').each(function(){  
     var $columns = $('li .avia-slide-wrap img',this);
     var maxHeight = Math.max.apply(Math, $columns.map(function(){
         return $(this).height();
     }).get());
     $columns.height(maxHeight);
});
});
var resizeId;
window.addEventListener('resize', function() {
    clearTimeout(resizeId);
    resizeId = setTimeout(doneResizing, 500);
});

function doneResizing(){
    location.reload();
}
})(jQuery);
</script>
    <?php
}
add_action('wp_footer', 'custom_script');

If you don’t know how to enable the theme editor then add this via FTP, or post FTP access in the Private Content area below.
Right now the script will only work on the homepage for you to review, if you approve we can adjust to work on other pages.

Best regards,
Mike

Hi,
I believe you mean that you added it to your live site and not the site I have assess to, I forgot it was not your live site.
Please remove the css for the home page, and check, the script automatically sets equal size for all home sliders this way the size is always correct no matter the screen size, otherwise you would need to set different sizes for mobile, tablet, laptop, & desktop.

Best regards,
Mike

Hi,
Perhaps I misunderstand your goal, the slider you are using is the full slider so it is meant to be this large for desktops, if you want to use the css with the script you can, I was trying to help correct the issue with the other device sizes and had hoped to create a solution for all sizes.

Best regards,
Mike

Hi,

Do you have a fix for the non-home pages so the size stays the same ?

Have you tried applying custom ID or class names to the sliders? You can use those attributes to directly modify an element with css or a custom script. If you haven’t done this before, please edit one of the sliders, go to the Advanced > Developer Settings toggle, then input your preferred custom ID or class name in the provided fields.

For example, in the Custom CSS Class field, use “av-transitionintl-slider”, then save the element. We can now use this class name to directly adjust that particular element or slider. In the script that @mike provided above, look for this line..

$('#top.home #full_slider_1 .avia-slideshow-inner').each(function(){  

and replace it with..

$('#top .av-transitionintl-slider .avia-slideshow-inner').each(function(){  

You may need to adjust the css as well.

.av-transitionintl-slider .avia-slide-wrap,
.av-transitionintl-slider .av_slideshow_full .av-slideshow-caption {
    max-height: 480px;
}

You might have noticed that we replaced “.home #full_slider_1” with the new css class name or selector. If you want to adjust the other sliders or apply the same modification to them, just apply the same class name to them “av-transitionintl-slider”, or use a different one and another css for it.

Best regards,
Ismael