Support » Plugin: WordPress Slider Block Gutenslider » Responsive height

  • Resolved dimizu

    (@dimizu)


    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 2 replies - 1 through 2 (of 2 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

    Plugin Author eedee

    (@eedee)

    Hey @dimizu,

    v3 is out with lots oft responsive setting. Closing the issue.

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