A slider with a fixed height leaves empty space under short slides and cuts off long ones. An adaptive height slider takes the height of the slide on show. In Gutenslider this is one switch, per device, in the free plugin.
Let the slider grow with each slide
- Select the slider and open the Slides panel.
- Turn on Grow with the content. The slider now takes the height of the slide on show.
- Use the device switch to set it per device. A common setup: a fixed height on desktop, where text sits next to the image, and grow with the content on phones, where everything stacks.
Or a fixed height
For photo sliders a steady height looks calmer. Set a Minimum height in the same panel, in any CSS unit:
| Value | Means | Good for |
|---|---|---|
400px | Always 400 pixels | Carousels, product sliders |
60vh | 60 % of the screen height | Heroes that scale with the screen |
30em | Grows with the font size | Text slides |
The minimum height is a minimum: a slide with more content than fits still makes the slider taller, so text is never cut off. Full screen height fills the screen instead, see Fullscreen background slider.
Tips
- With adaptive height the dots at the bottom move with each slide’s height. Keep the arrows at the sides, or with Pro move the dots to the top (eight dot positions).
- Check the padding on phones: 40 px around the content on desktop is a lot on a small screen. Padding can be set per device.
Every height option is in the settings reference.