Minimum slider height issues
When the slider gets too small on mobile, it seems natural to use the Min height feature to make the slider taller. However, this can cause problems under certain circumstances. Let's see and example to understand the problems better!
Here's a slider, that's merely 187px on mobile:
As you can see, the text is aligned to the bottom of the slider. I can make this slider taller by setting a Min height. So I set the Min height to 400px, which makes the slider taller:
As you can see, the text is no longer on the bottom.
Why did this happen?
The Min height works by increasing the height of the slider, but the Canvas, where the layers are won't be increased. The text is aligned to the bottom of the Canvas, and that haven't changed its size:
The Canvas keeps its size to ensure that your layers won't end up distorted.
How to make the slider taller on mobile?
- 1
-
Simply add some padding to e.g. the Content layer to increase the slider size and keep the content at the bottom. Here's how that looks:
- In the Editor
- In the Preview
- In the Editor
- 2
-
If you're a Pro user, you can also set a Custom slider size for this purpose.
