Layerslider image to stretch full width - Support | Kriesi.at

Viewing 7 posts - 1 through 7 (of 7 total)

Author

Posts
September 27, 2024 at 9:00 am #1467918

whdsolutions
Participant

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?

September 27, 2024 at 11:29 am #1467931
Guenni007
Participant
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.
- This reply was modified 1 month, 3 weeks ago by Guenni007.
September 27, 2024 at 1:33 pm #1467949

whdsolutions
Participant

Home

September 28, 2024 at 9:45 am #1467987
Guenni007
Participant
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 at the bottom)
```
<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.
October 1, 2024 at 12:03 pm #1468163
whdsolutions
Participant
Where does this code go?
```
<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>
```
October 1, 2024 at 12:08 pm #1468164
whdsolutions
Participant
I added but nothing happened
```
function top_divider_moves_outwards(){
?>
<script type="text/javascript">
window.addEventListener("DOMContentLoaded", function () {
(function($) {
  $('#top .avia-section.outwards').each( function() {
    var bgColor = $(this).css('background-color');
	  if($(this).children().hasClass('avia-svg-negative')){
		  $(this).find('.avia-divider-svg.avia-divider-svg-top').css({
			  "transform-origin" : "top center",
			  "-webkit-transform" : "translateY(-100%)",
			  "transform" : "translateY(-100%)",
			  "z-index" : "100",
		  });	
	  }
	  else{
		  $(this).find('.avia-divider-svg.avia-divider-svg-top').css({
			  "transform-origin" : "top center",
			  "-webkit-transform" : "rotate(180deg)",
			  "transform" : "rotate(180deg)",
			  "z-index" : "100",
		  });  
	  }
    $(this).not(".preserve-color").find(".avia-divider-svg-top > svg").css('fill', bgColor);
  });
})(jQuery);
});
</script>
<?php  
}
add_action('wp_footer', 'top_divider_moves_outwards');
```
October 3, 2024 at 4:52 pm #1468371

Mike
Moderator

Hi,
When I check at 2560px it looks like it is working, perhaps you have already sorted this out

Best regards,
Mike
Author

Posts

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.