Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #1467918

    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.

    Screenshot-2024-09-27-085633

    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?

    #1467931

    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 2 weeks, 3 days ago by Guenni007.
    #1467949
    #1467987

    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.

    #1468163

    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>
    #1468164

    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');
    #1468371

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

    Best regards,
    Mike

Viewing 7 posts - 1 through 7 (of 7 total)
  • You must be logged in to reply to this topic.