Thank you for getting in touch with us. My name is George and I'm happy to assist you today. I appreciate your patience while we've been working towards your ticket.
If you would like to have layers with different style and properties on mobile devices and desktop, I'll suggest you to use device specific layers. If you create a layer, you can set device visibility under LAYERS -> CONTENT, which means that the selected layer will appear only on the selected device type. You can select and combine desktop, tablet and mobile devices.
If you - for example - disable a layer on desktop, it will disappear from the slider if you are viewing it on desktop.
It is important to know, that in this case the layer will temporarily disappear also in the editor and it will be faded out in layers list. The reason of that is the editor is showing the content in the desktop device view by default. You can switch between the different device views with the device selector.
Layers with all device visibilities enables will show in all device view, but - for example - layers with only mobile device visibility enabled will show only if you are switching to mobile device view.
I suggest you to duplicate layers you would like to behave differently on separate devices and set different device visibilities for them. After that you can set them different style properties and transitions.
The canvas size in the editor won't change by selecting different devices, but you can easily check the layout if you run a Project Preview.
In that case, I would recommend you to create two different sliders, one for tablet & desktop devices and another for mobile devices. In this case, you can set how these layers work on different devices. If you open Project Settings -> Mobile, you can set that the slider for mobile devices should be hidden - for example - over 767px while the other slider should be hidden under 768px. These two sliders can have completely different canvas size, aspect ratio and layout.
I am using layerslider to design many elements of my website and it looks great on desktops, but not on mobile. How do I tweak the design for mobile?
Hello Shaun,
Thank you for getting in touch with us. My name is George and I'm happy to assist you today. I appreciate your patience while we've been working towards your ticket.
If you would like to have layers with different style and properties on mobile devices and desktop, I'll suggest you to use device specific layers. If you create a layer, you can set device visibility under LAYERS -> CONTENT, which means that the selected layer will appear only on the selected device type. You can select and combine desktop, tablet and mobile devices.
If you - for example - disable a layer on desktop, it will disappear from the slider if you are viewing it on desktop.
It is important to know, that in this case the layer will temporarily disappear also in the editor and it will be faded out in layers list. The reason of that is the editor is showing the content in the desktop device view by default. You can switch between the different device views with the device selector.
Layers with all device visibilities enables will show in all device view, but - for example - layers with only mobile device visibility enabled will show only if you are switching to mobile device view.
I suggest you to duplicate layers you would like to behave differently on separate devices and set different device visibilities for them. After that you can set them different style properties and transitions.
The canvas size in the editor won't change by selecting different devices, but you can easily check the layout if you run a Project Preview.
I hope this helps.
Best Regards,
George | Kreatura Dev Team
Thanks George,
If I wanted to change the canvas size for mobile, is that possible? Or, does that affect the desktop canvas size as well?
In that case, I would recommend you to create two different sliders, one for tablet & desktop devices and another for mobile devices. In this case, you can set how these layers work on different devices. If you open Project Settings -> Mobile, you can set that the slider for mobile devices should be hidden - for example - over 767px while the other slider should be hidden under 768px. These two sliders can have completely different canvas size, aspect ratio and layout.
Best Regards,
George | Kreatura Dev Team