# Adaptive height slider: grow with each slide, or a fixed height

URL: https://gutenslider.org/adaptive-height-slider/
Published: 2026-10-07
Updated: 2026-10-07

> Let the slider take the height of each slide, per device, or set a fixed minimum height in px, vh or em. Which to use when, and tips for arrows, dots and padding.

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.

The [content slider example](https://gutenslider.org/examples/#content) grows with its content on phones, where the columns stack.

### 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](https://gutenslider.org/wordpress-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](https://gutenslider.org/docs/settings/#navigation)).
- 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](https://gutenslider.org/docs/settings/#height).