A slider that looks right on a wide screen often needs less height and fewer slides on a phone. Gutenslider stores the settings that matter per device.
Three devices
Settings with the desktop / tablet / mobile switch keep one value per device. Switch the device, change the value, and the other devices keep theirs. The switch follows the editor’s preview device in the top bar, and the other way round, so the canvas shows the slider at that width while you set its values.
| Device | Screen width |
|---|---|
| Mobile | up to 600 px |
| Tablet | 601 to 960 px |
| Desktop | wider than 960 px |
What can differ per device
- Minimum height and grow with content
- Slides in view (up to eight) and slides per step
- Space between slides
- Padding and margin
- Arrows on or off, arrow size; arrow offsets (Pro)
- Dots on or off, dot size; dot offset (Pro)
- Visibility of the whole slider
The slide images follow the same widths: Gutenslider tells the browser how wide a slide is on each device, so a phone showing one slide and a desktop showing three both load a file of the right size.
Common setups
A carousel: 3 · 2 · 1
Slides in view 3 on desktop, 2 on tablets, 1 on phones; space between slides 20 · 12 · 8 px; dots off on phones, arrows on.
A hero: tall on desktop, compact on phones
Minimum height 80vh on desktop, 60vh on tablets and 70svh on phones, padding 20 px on phones so the headline has room. Set the focal point of every image so faces stay in the frame.
One slider per device
Place two sliders under each other, hide the first on phones and the second on desktop and tablet. Hidden sliders are not shown, but they are still in the page’s HTML, so keep the hidden one small.