I’m trying to change the slider layout for mobile devices. I need the slider to be taller on mobile so that users can read and click more easily on smaller screens. However, changing the height also affects other devices.
I checked the documentation but couldn’t find any instructions on how to apply this change only to mobile.
This is a very common question, and you’re right: changing the slider height globally will affect all devices. However, there are two recommended approaches in LayerSlider to achieve a taller, more usable layout specifically on mobile devices.
Option 1: Use Separate Sliders for Mobile and Desktop (Recommended for Best Results)
The most flexible and reliable solution is to create two separate sliders:
Mobile slider
Use a portrait-friendly aspect ratio (roughly 9:19).
For example: 450 × 950 px
Set the layout to Full Size, which works best on mobile devices and allows more vertical space for content.
Desktop / tablet slider
You can use any layout that fits your design (Full Width or Full Size usually provides the best visual impact).
To control which slider appears on which device:
Open Project Settings → Mobile
Set:
Mobile slider:Hide Over → 639
Desktop slider:Hide Under → 640
This ensures that only the appropriate slider is visible on each device size.
Option 2: Use a Single Slider with Device-Specific Layers
If you prefer to manage everything within one slider, you can tailor the content for different devices using device visibility settings.
Here’s how it works:
Each layer has device visibility options under Layers → Content
You can enable or disable visibility for:
Desktop
Tablet
Mobile (any combination)
For example:
A layer visible only on mobile will not appear on desktop
A desktop-only layer will be hidden on mobile devices
Important notes:
The editor shows desktop view by default, so mobile-only layers will temporarily disappear from the canvas and appear faded in the Layers list.
You can switch between device views using the device selector in the editor.
Layers visible on all devices will always appear, regardless of the selected view.
Tip:
If a layer needs different positioning, size, or animations on mobile, the best practice is to duplicate the layer, assign different device visibilities, and style each version separately.
Previewing Mobile Layouts
The canvas size in the editor does not change when switching device views. To accurately see how the slider behaves on mobile, we recommend using Project Preview, which reflects real responsive behavior.
We hope this helps clarify your options. Let us know which approach you’d prefer, and we’ll gladly guide you further.
Dear all,
I’m trying to change the slider layout for mobile devices. I need the slider to be taller on mobile so that users can read and click more easily on smaller screens. However, changing the height also affects other devices.
I checked the documentation but couldn’t find any instructions on how to apply this change only to mobile.
Thank you for your help.
Best regards, Sara
Hi Sara,
This is a very common question, and you’re right: changing the slider height globally will affect all devices. However, there are two recommended approaches in LayerSlider to achieve a taller, more usable layout specifically on mobile devices.
Option 1: Use Separate Sliders for Mobile and Desktop (Recommended for Best Results)The most flexible and reliable solution is to create two separate sliders:
Mobile slider
Use a portrait-friendly aspect ratio (roughly 9:19).
For example: 450 × 950 px
Set the layout to Full Size, which works best on mobile devices and allows more vertical space for content.
Desktop / tablet slider
You can use any layout that fits your design (Full Width or Full Size usually provides the best visual impact).
To control which slider appears on which device:
Open Project Settings → Mobile
Set:
Mobile slider: Hide Over → 639
Desktop slider: Hide Under → 640
This ensures that only the appropriate slider is visible on each device size.
Option 2: Use a Single Slider with Device-Specific Layers
If you prefer to manage everything within one slider, you can tailor the content for different devices using device visibility settings.
Here’s how it works:
Each layer has device visibility options under Layers → Content
You can enable or disable visibility for:
Desktop
Tablet
Mobile (any combination)
For example:
A layer visible only on mobile will not appear on desktop
A desktop-only layer will be hidden on mobile devices
Important notes:
The editor shows desktop view by default, so mobile-only layers will temporarily disappear from the canvas and appear faded in the Layers list.
You can switch between device views using the device selector in the editor.
Layers visible on all devices will always appear, regardless of the selected view.
Tip:
If a layer needs different positioning, size, or animations on mobile, the best practice is to duplicate the layer, assign different device visibilities, and style each version separately.
Previewing Mobile LayoutsThe canvas size in the editor does not change when switching device views. To accurately see how the slider behaves on mobile, we recommend using Project Preview, which reflects real responsive behavior.
We hope this helps clarify your options. Let us know which approach you’d prefer, and we’ll gladly guide you further.
Best Regards,
George | Kreatura Dev Team