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
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.
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?
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.
Sure,the URL is http://fhs-rupprecht.de/index.html#galerie.
Hello,
Thanks for your Patience!
Consider using the following code instead of the existing codes you have:
<div class="row justify-content-center">
<!-- Portfolio Single Gallery
============================================= -->
<div class="col-md-8 portfolio-single-image">
<div class="fslider" data-arrows="false" data-thumbs="true" data-animation="slide">
...
</div>
</div>
</div>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.
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
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:
<div class="fslider" data-arrows="false" data-animation="fade" data-thumbs="true">
<div class="flexslider">
<div class="slider-wrap">
<div class="slide max-vh-75" data-thumb="images/portfolio/single/slider-thumbs/7.jpg"><img class="object-cover" src="images/portfolio/single/full/7.jpg" alt="Slider 2"></div>
<div class="slide max-vh-75" data-thumb="images/portfolio/single/slider-thumbs/1.jpg"><img class="object-cover" src="images/portfolio/single/full/1.jpg" alt="Slider 1"></div>
<div class="slide max-vh-75" data-thumb="images/portfolio/single/slider-thumbs/10.jpg"><img class="object-cover" src="images/portfolio/single/full/10.jpg" alt="Slider 3"></div>
</div>
</div>
</div>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