How to replace the Advanced Layerslider

>>>>>> Update, I need some additional help after all.

This is the page without the slider : https://aptilostaging.wpengine.com/cloud/zero-touch-wifi-iot-no-slider/
I have managed to get it to look as I want with one exemption. I want the heading with white transparent background to be in the bottom LEFT corner of the color-section (background image) in order to look as much as possible as the page using the advanced layerslider. I have made some tweaks, with my limited knowledge in CSS, trying to achieve this. Works well for tablets but NOT for mobile phones for some reason.
FOR YOUR REFERENCE :This is the page with the advanced layer slider i.e. the look I want: https://aptilostaging.wpengine.com/cloud/zero-touch-wifi-iot/

This is the updated CSS (from Guenni’s original design), any suggestions are much appreciated:

.responsive-colorsection {
width: 100vw !important;
height: 29.6vw;
}

.responsive-colorsection .container {
position: relative;
height: 100% !important;
top: 0 !important;
}

.responsive-colorsection .container .content {
position: absolute !important;
bottom: 0px !important;
left: 0px !important;
width: auto !important;
}

.responsive-colorsection .container .av-special-heading {
background-color: rgba(255,255,255,0.9);
padding: 10px 15px;
}

.responsive-colorsection .template-page .entry-content-wrapper h1 {
text-transform: none !important;
}

>>>>>>
Hi,
I am looking for a way to replace the Advanced Layerslider with a fixed picture. This is because I want to speed up our site and also Layerslider is the only remaining problem when it comes to use webp pictures through the imagify plugin.

First I thought of using the color section and simply put the picture I want to use as background picture. Then use custom CSS to produce the H1 heading I want in terms of size etc to go on top of the picture. Problem is that I cannot find a way to get the picture all the way out to the edge, even if I set the padding to zero there will still be a few pixels white space to the left and right (if the picture is centered), this is not the case if I use colored background instead of picture. The next issue is that there is no way to say that the color section should fit to the background picture size. I need it to scale with different devices just like Layerslider does.

Is there a way to overcome this? I really want to get rid of the Advanced Layerslider as it only ads unneccesary code to my pages and ridiculously enough the majority of them only have one picture anyways. But I need the heading to be on in front of the picture at the bottom just like in the layerslider.

• This topic was modified 4 years, 2 months ago by Terve.