I can see the tablet and mobile buttons in the dashboard. However, when either is clicked, you would expect a change in the dimensions of the canvass view. Nothing changed when clicked. If you wanted to make adjustments responsively, what is the best way to go about it?
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 Full Size Layout and 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.
Great information George. I am going to try option 1. If there's any documentation showing the steps for this, that would be great. I could not find it. But I'll know if it is working for me by tomorrow.
I duplicated the main desktop slider that I am using. I made the canvass adjustment, and on the mobile slider, I set the Hide Over 639. Do I set the Hide Under 640 on the main slider? Im wondering how will the system know to go to the other slider on mobile if the shortcode is different.
the desktop slider will only appear on screens 640px and wider
the mobile slider will only appear on screens 639px and below
Regarding the shortcode: you need to place both sliders on the page, because each slider has its own shortcode. LayerSlider will not automatically swap one slider for another from a single shortcode.
So the setup is:
insert the desktop slider shortcode
insert the mobile slider shortcode
then use the Hide Under / Hide Over settings so only the correct one is shown on each device
That is how LayerSlider knows which version to display.
If you’d like, we can also show you the cleanest way to place both sliders on the same page.
Yes, in most cases the desktop version also works perfectly fine for tablets, so keeping just a desktop and a mobile slider is usually a good and practical setup.
That approach keeps things much simpler while still giving you good control over the mobile experience.
I can see the tablet and mobile buttons in the dashboard. However, when either is clicked, you would expect a change in the dimensions of the canvass view. Nothing changed when clicked. If you wanted to make adjustments responsively, what is the best way to go about it?
Hi Mark,
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 Full Size Layout and 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.
Best Regards,
George | Kreatura Dev Team
Great information George. I am going to try option 1. If there's any documentation showing the steps for this, that would be great. I could not find it. But I'll know if it is working for me by tomorrow.
I duplicated the main desktop slider that I am using. I made the canvass adjustment, and on the mobile slider, I set the Hide Over 639. Do I set the Hide Under 640 on the main slider? Im wondering how will the system know to go to the other slider on mobile if the shortcode is different.
Hi Mark,
Yes, exactly.
On your main desktop slider, you should set:
Hide Under → 640
And on your mobile slider, set:
Hide Over → 639
This way:
the desktop slider will only appear on screens 640px and wider
the mobile slider will only appear on screens 639px and below
Regarding the shortcode: you need to place both sliders on the page, because each slider has its own shortcode. LayerSlider will not automatically swap one slider for another from a single shortcode.
So the setup is:
insert the desktop slider shortcode
insert the mobile slider shortcode
then use the Hide Under / Hide Over settings so only the correct one is shown on each device
That is how LayerSlider knows which version to display.
If you’d like, we can also show you the cleanest way to place both sliders on the same page.
Best Regards,
George | Kreatura Dev Team
Wow. You learn something every day. That was insightful, and worked liked nicely.
I'm just doing desktop and mobile though. Kinda hoping that desktop will work for tablet view. Dont want to get too complicated.
Hi Mark,
Yes, in most cases the desktop version also works perfectly fine for tablets, so keeping just a desktop and a mobile slider is usually a good and practical setup.
That approach keeps things much simpler while still giving you good control over the mobile experience.
Best Regards,
George | Kreatura Dev Team