Canvas slider scaling

Question

I'm trying to scale the height of the canvas slider to be a % of the viewport height.
The code I'm using is <section id="slider" class="slider-element slider-parallax swiper_wrapper vh-75">
This works great. However, I want to make the height slightly less than 75%, and if I change that number to anything other than 75 or 100, the slider disappears. I know I can set the height in pixels, but that requires setting it with media queries so it adapts to each screen size. Is there a way to set it as a % of viewport size so it scales automatically?

SemiColonWeb · Accepted Answer

Hello,

This is Definitely Possible! We already have Utility Classes to set Heights according the Viewport: http://docs.semicolonweb.com/docs/utility-classes/heights/ . Currently, you can set the Height that are defined in this Documentation. 100, 75, 60, 50, 40, 25 and 0. These are responsive as well, so you can set different heights for different devices.

If you need a Custom Height, simply set style="height: 70vh;" Attribute on the Slider Element (Make sure that you have already any vh-* Class). Thats it!

Hope this Helps!

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

Only1BruceC · Answer

Works, THANKS! Sorry, I didn't find that in the documentation.

Semicolon Web · Answer

Hello, Very Happy to Help! :) Do let us know if we can help you with anything else or if you find any further issues with Canvas.