Slide min-height not working

  • When changing to a smaller screen size, the min-height changes for a smaller number of slides before the number of slides changes. As the window width gets smaller the min-height of the slides should get smaller to maintain the aspect ratio of the slides. It usually does, but there’s a point where this behavior breaks. For example, go to https://edgewebpages.com/slide-anything-usage-examples/ and set the window width to 997px. (I’m using Google Chrome with developer tools open to see window width) The min-height of the divs with a class of “sa_hover_container” is 392px. Change the window width to 996px, and the divs min-height goes up to 588px instead of going down, which makes the aspect ratio of the images much taller than they should be. 588px is the height for two slides, but there are still three slides visible. The slideshow doesn’t change to two slides until the window width gets down to 979px. At this point, the aspect ratio of the slides is back to normal. So when the window width is in the range of 980px to 996px, the aspect ratio of the slides is too tall.

    Thanks for any help,
    Steve

    The page I need help with: [log in to see the link]

Viewing 1 replies (of 1 total)
  • Plugin Author simonpedge

    (@simonpedge)

    Hi Steve,
    That’s for bringing this bug to my attention.
    Having a look at the code, everything looks ok:

    function sa_resize_menu_slider() {
	var min_height = '120';
	var win_width = jQuery(window).width();
	var slider_width = jQuery('#menu_slider').width();
	if (win_width < 480) {
		var slide_width = slider_width / 1;
	} else if (win_width < 768) {
		var slide_width = slider_width / 2;
	} else if (win_width < 980) {
		var slide_width = slider_width / 2;
	} else if (win_width < 1200) {
		var slide_width = slider_width / 3;
	} else if (win_width < 1500) {
		var slide_width = slider_width / 3;
	} else {
		var slide_width = slider_width / 3;
	}
	slide_width = Math.round(slide_width);
	...

    I think the issue may be with the built in jQuery function used:
    var win_width = jQuery(window).width();
    AND scrollbars – the range you are talking about is 16px which is probably the width of the page scrollbars.

    If you open Chrome Developer tools, click on the mobile browser, set the device to ‘Responsive’, and then manually set the width to 990px you will see that the slide min-height looks fine at 120%. BUT if you view the page normally in your browser window and resize to 990px you will see the issue you have highlighted.

    So I think in the real world, on tablets it is working ok in this resolution range 980-996, its just because we are testing this range on a desktop browser (with a scrollbar), its throwing it out.

Viewing 1 replies (of 1 total)
  • The topic ‘Slide min-height not working’ is closed to new replies.