We have an image (not a background image) that is working as a faux-mask on the slider so it appears to have a curved bottom.
However, if the screen size is bigger than 1920×1080, it simply stops.
Is there a way to make this image stay anchored to the bottom, but stretch horizontally if the resolution is greater than 1920×1080?
Can I have a look at this page? ( if you could not post the link here – send me an e-mail)
because I think it’s easier to achieve this in another way.
f.e. this way: https://webers-testseite.de/divider-on-sliders/
at the moment i try to use the given curve divider – that does not fit because it is a konvex Curve … so be a bit patient.
we can use the konvex Curve of Enfold – but we use than that negative option (invert) – in this way we had to differ on how to transform the divider svg.
so snippet gets an if / else clause now.
a different much easier way is using clip-path on those slider wrappers by an inline svg file ( path has to be in relative values – convert for example here: link )
but disadvantage: you have to synchronize the background-color of that section to the next section – otherwise you got a gap (see green area on example page)
<svg class="bottom-curve">
<clipPath id="bottom-curve" clipPathUnits="objectBoundingBox"><path d="M1,0.9 s-0.25,0.1,-0.5,0.1 S0,0.9,0,0.9 V0 h1 v0.9"></path></clipPath>
</svg>
<style>
.bottom-curve > div {
-webkit-clip-path: url(#bottom-curve);
clip-path: url(#bottom-curve);
}
</style>
you see how this works – give then the custom-class: bottom-curve to the slider element or to the color-section.