I need to have Layerslider layouts differ at multiple breakpoints. For example at desktop (1601px and above - its been designed at 2560px) I want it left fully responsive (scaling up as it goes). At 1600px and below I want the background and other image elements scale but I want text and another image to remain at the "original" desktop size but also moved somewhat to ensure everything stays visible and readable.
When I get to 1024, 768 & 360px I'm looking to simply show single slide images relevant to the size rather than any animation.
So my questions are:
1. Should I just override everything at the relevant breakpoint in my css (I feel that I'll be needing a lot of !important statements in my css media queries) or is there a better way to achieve this?
2. For the tablet/mobile screens (1024, 768 & 360px wide) should I disable Layerslider entirely and use another instance of LayerSlider instead or is there a way of achieving this in the same LayerSlider?
Unfortunately at the moment there is no option in the plugin to create such complex layout that scales and changes positions depending on the resolution and device.
However, since version 6 you have the option to display layers only on certain devices (desktop, mobile, tablet). You could use this new feature to create separate layers for mobile and desktop view in the same slide and only show them on the required device.
Furthermore, you have the option to set a minimum font size for texts on mobile.
Thanks for the reply, I'm actually using the JQuery version though so I'm assuming you are referring to the options "ls-hide-desktop", "ls-hide-tablet" & "ls-hide-phone"
Looks like I'll have to work through the css styling then.
I need to have Layerslider layouts differ at multiple breakpoints. For example at desktop (1601px and above - its been designed at 2560px) I want it left fully responsive (scaling up as it goes). At 1600px and below I want the background and other image elements scale but I want text and another image to remain at the "original" desktop size but also moved somewhat to ensure everything stays visible and readable.
When I get to 1024, 768 & 360px I'm looking to simply show single slide images relevant to the size rather than any animation.
So my questions are:
1. Should I just override everything at the relevant breakpoint in my css (I feel that I'll be needing a lot of !important statements in my css media queries) or is there a better way to achieve this?
2. For the tablet/mobile screens (1024, 768 & 360px wide) should I disable Layerslider entirely and use another instance of LayerSlider instead or is there a way of achieving this in the same LayerSlider?
Thanks in advance.
Simon
Hey Simon,
Unfortunately at the moment there is no option in the plugin to create such complex layout that scales and changes positions depending on the resolution and device.
However, since version 6 you have the option to display layers only on certain devices (desktop, mobile, tablet).
You could use this new feature to create separate layers for mobile and desktop view in the same slide and only show them on the required device.
Furthermore, you have the option to set a minimum font size for texts on mobile.
Thanks for the reply, I'm actually using the JQuery version though so I'm assuming you are referring to the options "ls-hide-desktop", "ls-hide-tablet" & "ls-hide-phone"
Looks like I'll have to work through the css styling then.