[Resolved] Container height of View not be automatically adjusted

[Author]

Posts

[kelvinL-2]

Dear Sir/Madam,

I want to make a banner slider using View, it is fine when displaying on desktop, but lot of space above and below the image on mobile.

If I set the min-height to the container, it works fine on desktop but not good on mobile, if I leave the min-height empty, the image can be displayed. How can I make the banner be showed according to its actual height with responsive?

Best regards,

Kelvin

[Waqar Supporter Languages: English (English ) Timezone: Asia/Karachi (GMT+05:00)]

Hi,

Thank you for contacting us and I'd be happy to assist.

I've checked the homepage's slider on a couple of different screen sizes and noticed that it is showing correctly. The slider height changes with slides because the images used don't have the uniform/same height or proportional aspect ratio.

If you'd like the image slider to keep a certain height, please make sure that all images have the same dimensions or aspect ratio.

In case, you're still seeing any extra spaces in any particular device or browser, please share the details and I'll have it tested, accordingly.

regards,
Waqar

[kelvinL-2]

Dear Waqar,

You can visit the page hidden link all banner images are the same size, as the image is responsively displayed, no matter how many pixels I set to the container height, the slider doesn't auto fit the height and extra spaces are added.

I tested with another plugin metaslider, which can well adjust the height of the slider container on different devices or browsers.

[Waqar Supporter Languages: English (English ) Timezone: Asia/Karachi (GMT+05:00)]

To proportionally set the slider area's height so that there are no extra space, you can include the following script in the view's "JS Editor":

jQuery( document ).on( 'ready resize', function( event, data ) {
  var contWidth = jQuery('div#home-slider-container').width();
  var contHeight = Math.round(contWidth / 4.14 );
  jQuery('div#home-slider-container').css( "height", contHeight );
  jQuery('div#home-slider-container').css( "min-height", contHeight );
});

Note: The custom code examples from our forum are shared to get you started in the right direction. You're welcome to adjust them as needed and for more personalized customization assistance, you can consider hiring a professional from our list of recommended contractors:
https://toolset.com/contractors/