-
Posts
-
I have an issue with the layer-slider on mobile.
Can anyone explain why the height on mobile is so small?
Also the height does not auto adjust to the elements within the slider why is this?
Thanks,
Hey Jay,
Typically layer slides created for desktops are in a landscape format and maintain the aspect for mobile which has a portrait format, for best results you should either create two layer sliders, one for desktop and one for mobile ensuring that the canvas size for each is adjusted for your target device, and display based on device screen size. A more advanced solution is to use the settings in the LayerSlider for the backgrounds and each layer element to display based on device screen size, essentially doing the same thing in one slider. You can read the LayerSlider documentation for more info or ask the LayerSlider support for assistance.Best regards,
MikeThanks for the reply.
Previously I used the two sliders. This does work. However it causes issues with the Google Core Web Vitals score.
It also presents another issue in that you end up with dozens of different sliders. This is a bit of a pain.So after allot of work i seem to have found a solution. You simply need to add the code below to the mobile media query:
#layer_slider_1, #layer_slider_1 .ls-inner {height: 100vw !important;}
This allows the canvas to adapt to the mobile content that has been added in layer slider.
This works for me and i hope it can be helpful to others.
Please let me know if you foresee any issues with this. My biggest concern is browser capability. But seen as this is just for mobile i dont think it will be much a problem.
Please share any thoughts.
- You must be logged in to reply to this topic.