I'm struggling to get my slider looking good on mobile devices, as there appears to be no way to target element styling specifically on mobile using the CSS editor. I'm using your 'Flying Banners' template, and would like to increase the font size and button sizes on mobile devices specifically.
Does your builder really not have any way to allow media queries?
Because of the way the slider outputs html I can only seem to target elements within their LS div wrappers
You can set a min.mobile font size for the layers in the layer styles.
Since version 6 of LayerSlider you have the option to display layers only on certain devices (desktop, mobile, tablet). This feature is called device specific layers, and it gives you the option to create separate layers for mobile, tablet and desktop view in the same slide, and only show them on the required device. This only changes the slider on the layer level.
Additionally to the device specific layers, you could also build two sliders with different sizes or with different content/layout for desktop and mobile, include them both to the site, and only display them (using the Hide over and Hide under options in the Slider Settings) on the required device. You can change every slider option this way. So this gives you more control, but requires more work.
OK, this makes a little bit more sense - I'd expected to be able to customise based on CSS, but duplicating layers and playing around with their visibility also works. Thanks for your help, I've gotten my slider to display the way I want now.
Hi there,
I'm struggling to get my slider looking good on mobile devices, as there appears to be no way to target element styling specifically on mobile using the CSS editor. I'm using your 'Flying Banners' template, and would like to increase the font size and button sizes on mobile devices specifically.
Does your builder really not have any way to allow media queries?
Because of the way the slider outputs html I can only seem to target elements within their LS div wrappers
Hello Caspar,
Thank you for getting in touch with us!
You can set a min.mobile font size for the layers in the layer styles.
Since version 6 of LayerSlider you have the option to display layers only on certain devices (desktop, mobile, tablet). This feature is called device specific layers, and it gives you the option to create separate layers for mobile, tablet and desktop view in the same slide, and only show them on the required device. This only changes the slider on the layer level.
Additionally to the device specific layers, you could also build two sliders with different sizes or with different content/layout for desktop and mobile, include them both to the site, and only display them (using the Hide over and Hide under options in the Slider Settings) on the required device. You can change every slider option this way. So this gives you more control, but requires more work.
Best Regards,
Andrea | Kreatura Support Team
Hi Kristof,
OK, this makes a little bit more sense - I'd expected to be able to customise based on CSS, but duplicating layers and playing around with their visibility also works. Thanks for your help, I've gotten my slider to display the way I want now.
Thanks,
Caspar
You are welcome!
Best Regards,
Andrea | Kreatura Support Team