flexslider with portrait and landscape images

7 replies · opened Jun 11, 2023

GgruenderinoJun 11, 2023

Hi,

I'm using the flexslider from the thumbnails-slider template side with both portrait and landscape images. The portrait picture takes the full height and that leads to issues with the landscape images: there's a huge whitespace between the landscape images and the thumbnails.

How can I remove this whitespace for the landscape images?

Kind Regards
Patrick

SSemicolon WebSTAFFJun 12, 2023

Hello,

This issue is usually only when using the data-animation="fade" Option. If you are using Variable Sized images, please consider using data-animation="slide" instead as this will enable the Smooth Height adjustment for the Flex Sliders.

We are currently working on a Better Responsive Slider option which will rectify this issue.

Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

GgruenderinoJun 15, 2023

Thanks, this is a lot better. However now some images occupy less than 100% of the viewport and others are larger in height and stretch even below the viewpoint.
Is there a good option to have the all resize to roughly 75% of the viewport without cutting the images off?

SSemicolon WebSTAFFJun 16, 2023

Hello,

Apologies for the Inconveniences caused! Can you please provide us with a Live URL so that we can check out the exact issue and provide you with more accurate assistance on this. Thanks for your Patience.

Meanwhile, do let us know if we can help you with anything else or if you find any further issues with Canvas.

SSemicolon WebSTAFFJun 19, 2023

Hello,

Thanks for your Patience!

Consider using the following code instead of the existing codes you have:
[ch_pre]

        ...

[/ch_pre]

You can change the .col-md-8 Class according to your needs and based on how much would you like the images to be aligned in the viewport.

Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

GgruenderinoJun 19, 2023

Hi,

even at col-lg-6 and col-md-6 the portrait images are taller than 1 screen worth of viewing. Any other suggestions on how I could make that scale?

Kind Regards
Patrick

SSemicolon WebSTAFFJun 21, 2023

Hello,

Thanks for your Patience!

Flex-Sliders are Flexible Sliders and the Size of the Flex-Sliders depends on the size of the Images added to it. If you consider using a Max Viewport Height for the Sliders, there is no guarantee if the Images will display all its properly and usually it is centrally aligned. You can consider using the following code:
[ch_pre]



attachment

attachment

attachment

[/ch_pre]

This Codes uses 75% of the Viewport for the Sliders using the .max-vh-75 Class. You can consider using these Classes: https://docs.semicolonweb.com/docs/utility-classes/heights/ if you choose to use a different max-height.

Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

Have the same question, or something new?

Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.

Reply on the dashboard