Slider height decrease fails upon resizing window

Dear Kharis,

I used your snippet for decreasing the slider height (https://athemes.com/snippets/decrease-slider-height/ which works until i resize the browser window; then the slider becomes full height again.
Any ideas?

Thanks in advance

Dear Isfak,

Could you please share the link to your site, so I can take a closer look? Doing so would help me to find the possible solution.

Regards,
Kharis

Dear Kharis,
How can I share the url privately with you?
Thanks

Kharis hi,

I managed to resolve the issue by commenting out the JQuery code snippet from the Custom JavaScript plugin and typing the following code with Simple Custom CSS plugin instead:

/* CHANGE SLIDER HEIGHT */ .header-slider { height: 500px !important; }

The problem is, how can I set the height to RELATIVE size (e.g. 50%) instead of ABSOLUTE (px,em etc)???
Because when I enter:

.header-slider { height: 50% !important; }

then the slider disappears completely!

Thanks again for your patience.

P.S. The JQuery code I found in https://athemes.com/forums/topic/slide-height/ does not work either for me

> The problem is, how can I set the height to RELATIVE size (e.g. 50%) instead of ABSOLUTE (px,em etc)???

So you want it to be 50% of the screen height? Please advise.

Regards,
Kharis

Kharis hi,

50% was just an example; Could be 20%, 30% or whatever. I just want it to be able to take any percentage of the screen instead of fixed pixels.

Thanks again!

Hello there,

It can be achieved by doing jQuery approach instead of CSS. We can use jQuery code to count the height of the screen and get the 50% of it.

Please try to do the following steps:

  1. Install and activate the TC Custom JavaScript plugin
  2. Go To Appearance > Custom JavaScript
  3. Paste the following code into the provided box

(function($){
      
  $(window).on('load resize', function() {

    var slideHeight = $('#slideshow').height();
    var wHeight     = $(window).height();
    var newHeight   = 0.5*wHeight; // 50% of the screen height

    $('#slideshow').height(newHeight);
    
  });

})(jQuery);

  1. Update

You would clear your web browser’s cache before reloading your site to see the code addition takes affect. If your site is being cached by a plugin like W3 Total Cache, empty all cache as well please.

Regards,
Kharis

Dear Kharis,

Thanks for the quick reply. However I had tried this already ( https://athemes.com/forums/topic/slide-height/). Indeed it works; but only until you resize your browser window; then the slider becomes full-screen again!

Any ideas?

Thanks!

Dear Isfak,

Please share the link to your site, so I can take a closer look. Make sure the code remains there.

Regards,
Kharis

Kharis hi,

Found the solution with pure CSS3, no JavaScript required.
CSS3 introduces the vh unit (viewport height; see http://www.w3schools.com/cssref/css_units.asp).
So if I want to set the slider to 50% of the screen I just put the following CSS code into my child theme style.css file or in the Simple Custom CSS plugin:

.header-slider {
height: 50vh !important;
}

Done!
Thanks again

Awesome! I am glad to know you have been able to manage it by yourself. Thank you for sharing it. It would be very useful for others.

Regards,
Kharis