I have multiple license keys, i don't know which goes to which site.
this is best illustrated directly with code...
objective is to use custom CSS with @screens to modify the styling of individual layers.
example layer code:
<p class="ls-s0" style="top:100px;left: 50%" data-ls="" >TEXT TO DISPLAY</p>
this will display the text 100 pixels from the top - as is
what i'm failing to accomplish:
<style>
.s1l1 {top:100px}
@media (max-width: 1439px) { .s1l1 {top:200px;} }
</style>
<p class="ls-s0 s1l1" style="left: 50%" data-ls="" >TEXT TO DISPLAY</p>
syntax is correct. result is it just defaults to top:0; and nothing happens responsive - nothing happens at all. I don't believe inline @media exists as a valid thing.
Thank you for getting in touch with us! I suggest you two alternative solution instead of custom CSS code:
1. It is possible to show/hide layers on specific devices ( mobile, tablet, desktop ) with the Show this layer on the following devices option. You should check this screenshot in our documentation page about where to find this setting. https://layerslider.kreaturamedia.com/documentation/#layer-options
2. I suggest you to create separate slider for specific devices, one for desktop and one for mobile. It will make the optimization easier. You should set the Hide over and under options in the Slider Settings / Mobile tab. You can check mobile slider examples in our templates, for example in this: https://layerslider.kreaturamedia.com/sliders/personal-page-pack/
If you will have any other question, feel free to ask.
my appologies for the miscommunication. This is the jquery layerslider. NOT wp plugin.
what are the eqivalent property labels? I know how to implement, just need to know what those properties and values are or where they are in the non wp version docs? I think we're at v6?
The issue is these 4k / UD displays using random zoom levels, messes everything up...
What are the max sizes layerslider uses to dictate pc / tablet / mobile? in pixels please?
Thank you for your feedback! You will not be able to modify the styles with css, because due to the responsiveness we will save the initial values and then pack it depending on the size. You could override it with !important, but then let's say the positioning might be good, but the size will still be overwritten by the slider. The point is that if you use important, you can overwrite it in theory, but we definitely recommend that you should use the devide dependent layers: ls-hide-phone, ls-hide-tablet, ls-hide-desktop (these can of course be also combined) Desktop is above 1024 px, tablet between 1024 and 768 and mobile 767 or below.
Ok so on my follow up you answered my first question, which by both responses is not the ideal method.
Again what i was asking is simply for you to inform me of the property names in the jquery version via your original suggestion of using multiple sliders and hiding them by device.
Sorry for the inconvenience! You can use these properties to hide a slider on specific device: hideOnMobile -> Hides slider in mobile devices, including tablets
hideUnder -> Hide the slider when the viewport width goes under the specified value
hideOver -> Hide the slider when the viewport width goes over the specified value
You can check these properties in the jQuery version documentation(it is available in the downloaded package) -> Slider Setup -> Mobile.
Hello,
I have multiple license keys, i don't know which goes to which site.
this is best illustrated directly with code...
objective is to use custom CSS with @screens to modify the styling of individual layers.
example layer code:
<p class="ls-s0" style="top:100px;left: 50%" data-ls="" >TEXT TO DISPLAY</p>
this will display the text 100 pixels from the top - as is
what i'm failing to accomplish:
<style>
.s1l1 {top:100px}
@media (max-width: 1439px) { .s1l1 {top:200px;} }
</style>
<p class="ls-s0 s1l1" style="left: 50%" data-ls="" >TEXT TO DISPLAY</p>
syntax is correct. result is it just defaults to top:0; and nothing happens responsive - nothing happens at all. I don't believe inline @media exists as a valid thing.
even without the @media this doesn't work.
What am i missing?
Hello Projectwebseo,
Thank you for getting in touch with us!
I suggest you two alternative solution instead of custom CSS code:
1. It is possible to show/hide layers on specific devices ( mobile, tablet, desktop ) with the Show this layer on the following devices option. You should check this screenshot in our documentation page about where to find this setting.
https://layerslider.kreaturamedia.com/documentation/#layer-options
2. I suggest you to create separate slider for specific devices, one for desktop and one for mobile. It will make the optimization easier. You should set the Hide over and under options in the Slider Settings / Mobile tab.
You can check mobile slider examples in our templates, for example in this:
https://layerslider.kreaturamedia.com/sliders/personal-page-pack/
If you will have any other question, feel free to ask.
Best Regards,
Andrea | Kreatura Support Team
Hello,
my appologies for the miscommunication. This is the jquery layerslider. NOT wp plugin.
what are the eqivalent property labels? I know how to implement, just need to know what those properties and values are or where they are in the non wp version docs? I think we're at v6?
The issue is these 4k / UD displays using random zoom levels, messes everything up...
What are the max sizes layerslider uses to dictate pc / tablet / mobile? in pixels please?
Hello,
Thank you for your feedback!
You will not be able to modify the styles with css, because due to the responsiveness we will save the initial values and then pack it depending on the size. You could override it with !important, but then let's say the positioning might be good, but the size will still be overwritten by the slider. The point is that if you use important, you can overwrite it in theory, but we definitely recommend that you should use the devide dependent layers: ls-hide-phone, ls-hide-tablet, ls-hide-desktop (these can of course be also combined)
Desktop is above 1024 px, tablet between 1024 and 768 and mobile 767 or below.
Best Regards,
Andrea | Kreatura Support Team
Ok so on my follow up you answered my first question, which by both responses is not the ideal method.
Again what i was asking is simply for you to inform me of the property names in the jquery version via your original suggestion of using multiple sliders and hiding them by device.
I'll look it up myself.
close this ticket.
Hello,
Sorry for the inconvenience!
You can use these properties to hide a slider on specific device:
hideOnMobile -> Hides slider in mobile devices, including tablets
hideUnder -> Hide the slider when the viewport width goes under the specified value
hideOver -> Hide the slider when the viewport width goes over the specified value
You can check these properties in the jQuery version documentation(it is available in the downloaded package) -> Slider Setup -> Mobile.
Best Regards,
Andrea | Kreatura Support Team