I have currently uploaded a sample scroll scene layer slider into my site. because i'm struggling to make the scene i'm building work. I ended up realizing that the sample scene doesn't work correctly either. the entire scene doesn't show.
Some of the research i've done says something about "height" being set to auto... but i don't know where to do that.
We did get the basic version of LayerSlider with the enfold theme, but we upgraded to premium to get the scroll scene and support.
I am in need of support. this is not working well for us.
Please paste the following code into the LayerSlider CSS editor:
body {
overflow: visible !important;
}
.avia-layerslider {
height: auto !important;
border: 0 !important;
}
Why this CSS is necessary
.avia-layerslider { height: auto !important; }
Without this, the Enfold theme forces a fixed height on LayerSlider, which cuts off parts of the Scroll Scene. This line ensures that the height adjusts dynamically to the content.
body { overflow: visible !important; }
Some versions of Enfold set overflow: hidden on the <body> element, which prevents off-screen Scroll Scene animations from being visible. This overrides that behavior.
I have currently uploaded a sample scroll scene layer slider into my site. because i'm struggling to make the scene i'm building work. I ended up realizing that the sample scene doesn't work correctly either. the entire scene doesn't show.
Some of the research i've done says something about "height" being set to auto... but i don't know where to do that.
We did get the basic version of LayerSlider with the enfold theme, but we upgraded to premium to get the scroll scene and support.
I am in need of support. this is not working well for us.
Hello Jeffrey,
Please paste the following code into the LayerSlider CSS editor:
body { overflow: visible !important; } .avia-layerslider { height: auto !important; border: 0 !important; }
Why this CSS is necessary.avia-layerslider { height: auto !important; }
Without this, the Enfold theme forces a fixed height on LayerSlider, which cuts off parts of the Scroll Scene. This line ensures that the height adjusts dynamically to the content.
body { overflow: visible !important; }
Some versions of Enfold set overflow: hidden on the <body> element, which prevents off-screen Scroll Scene animations from being visible. This overrides that behavior.
Attached files: ENFOLD-FIX-paste-custom-css-code.png
Best Regards,
George | Kreatura Dev Team
Hey George,
that worked like a charm... thank you
however, now it seems as though it is not compatible with other animation elements in the page.
meaning, when i animate elements in my page... such as a column or a special header text... the layer slider completely disappears.
you can check this at fourfront2025.wpenginepowered.com
thanks
Jeff
Hi Jeff,
The sliders don’t show up for me either on the linked site, and it also seems like the CSS code I sent isn’t being applied to the correct elements.
Best Regards,
George | Kreatura Dev Team