Carousel height and width balance
-
Hello. I'm trying to achieve a styling in a Carousel where the images are using the browser window's total height (100vh), but only on the images that has a height that fills out the height of the browser window.
This is what I want to achieve:
However, setting Slides Width to auto will scale up every image to be 100vh in height:
And setting a custom width, fx 40%, will create dead space on images that can't achieve 40% width because they already have achieved 100vh.
Is there a fix or a value I can use?
-
hey for the next carousel update i will add html classes to the slides like:
.orientation-landscape and .orientation-portraitthen you'll be able to set custom sizes for the landscape slides by using css
-
now when you update lay carousel and lay theme
youll have these classes:
hope that helps
-
Yes, by setting widths to auto and keeping 100vh height in the carousel settings I was able to remove white space from portrait images by adding a custom width to landscape images. Now all images have even white space between and it just looks so much better. Thank you!
-
ah very nice!
i would like to see it if you don't mind can u post a link?
Before you post:
- When using a WordPress Cache plugin, disable it or clear your cache.
- Update Lay Theme and all Lay Theme Addons
- Disable all Plugins
- Go to Lay Options → Custom CSS & HTML, click "Turn Off All Custom Code", click "Save Changes"
This often solves issues you might run into
When you post:
- Post a link to where the problem is
- Does the problem happen on Chrome, Firefox, Safari or iPhone or Android?
- If the problem is difficult to explain, post screenshots / link to a video to explain it