Support » Plugin: WordPress Slider Block Gutenslider » Responsive height

  • I use the Slider with an pixel height. On Desktop I need 780px, on tablet 600px, on smartphone 400px. I solved this with a javascript hack.

    
    setGutenslider();
    window.addEventListener("resize", setGutenslider);
    
    function setGutenslider() {
    
    	var hoehe;
    
    	if ($(window).width() <= 768) {
    		hoehe = "400px";
    	} else {
    		if ($(window).width() <= 992) {
    			hoehe = "600px";
    		} else {
    			hoehe = "780px";
    		}
    	}
    
    	var sliders = document.querySelectorAll('.wp-block-eedee-block-gutenslider');
    	sliders.forEach(function (el) {
    
    		el.style.setProperty('--gutenslider-min-height', hoehe);
    
    		var bodyStyles = window.getComputedStyle(el);
    		var fooBar = bodyStyles.getPropertyValue('--gutenslider-min-height');
    
    	})
    }	
    

    This works for me.

    But perhaps you would plan in a future version a better solution e.g. with different inputs für small, medium and large screens or an other solution that solves the problem with height for different devices/screens.

Viewing 1 replies (of 1 total)
  • Plugin Author eedee

    (@eedee)

    Hey @dimizu,

    we totally agree and we are working on it. This and other features will be part of our version 3.0.0 release which will come this year.

    Thank you for sharing your code, so others can profit from it until the plugin is not updated.

    Best,

    Niklas

Viewing 1 replies (of 1 total)
  • You must be logged in to reply to this topic.