Header Slider Responsive Height

Hi, I am looking to have both the slider and clients widget viewable on home screens initial load. So I would like the slider to be responsive and take up the whole screens height minus the widget under it (150px). I have tried to adjust the sliders height and have been able to with specific pixel dimensions ex. height:600px…However, height: calc(100% - 150px) is not working. Any help would be greatly appreciated.

Looks Like This Now:

I Would Like Somehting like:

The website is http://mikefernandesfitness.com

Hello there,

Thank you for getting in touch here.

The default main slider height is handled by the jQuery Superslides plugin which is called in the js/scripts.js file. To modify the final height, you can use jQuery height() method applied to the main slider’s selector. Try to do the following steps:

  1. Install and activate the Header and Footer Scripts plugin
  2. Go To Settings > Header and Footer Scripts panel
  3. Paste the following code into the provided Scripts in footer box

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

    var slideHeight = $('#slideshow').height();
    var newHeight = slideHeight-150;

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

})(jQuery);
</script>

  1. Save settings

You would need to clear your browser cache before reloading your site.

Let me know how it goes.

Regards,
Kharis

Works like a charm! Thank you Kharis for the solution

You’re welcome!

Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.

If you don’t mind, could you please rate our Sydney theme here? We would highly appreciate it if you do so.

Regards,
Kharis

Hi,
Please I applied this solution you gave up here to Astrid Theme, there was a little difference, but I sincerely wish I could reduce the slider further in height. I tried making the above (slideHeight-150) to be (slideHeight-250) if it could translate to my desire; please what would you suggest?

Or altogether, is there other solution I can apply please to reduce further? Thanks in anticipation.

Warm Regards.

After installed Header and Footer Scripts plugin the slider disappeared and if I turn it off the slider remains disappeared.

P.S. wordpress didn’t install jQuery Superslides plugin.

Hello there,

Please share the URL of your site, so I can take a closer look to inspect what is going wrong there. Be sure that the custom jQuery code remains.

Regards,
Kharis

www.creailtuovideo.cloud
Thank you!

Hello there,

I noticed that the header slider isn’t active yet on your site. Please go to Appearance > Customize > Header area > Header type > Front page header type > be sure that “Full screen slider” is selected. And also be sure that you have setup your sliders on Customize > Header area > Header Slider.

Regards,
Kharis

Hi there - this is my first post so I hope this is the correct place to ask. Not sure if should open a new ticket. I am having a similar issue as the above posters. What is happening to me is my slider header is being positioned in varying positions based on different screen resolutions. I have a laptop and 4 other screens I test on and each one places the slide in a slightly different position. I attempted the jquery fix and it didnt seem to do anything. Just when I think I have it - it moves it on another screen resolution. Not sure how I give you access to my dashboard - do you need user credentials? On a separate issue i am having a screen scrolling problem where elements are spilling over into empty space.

Thanks in advance
Matt

Hello Matt,

Are the screen resolutions of those 4 devices different? Please review my reply on this topic on WP.org support forum. You might get an answer on there.

> On a separate issue i am having a screen scrolling problem where elements are spilling over into empty space.

Can you see this issue to happen on our demo site? What will happen if you use larger image, 1920 x 1275 px as our demo uses.

Regards,
Kharis

Hi Kharis

Thanks for getting back - yes the monitors are all different resolutions. 1 is 2560 x 1440 the other is 1920x1080 and another 1600x1024. This is not even taking into account tablets or cell devices.

I fixed the screen scrolling issue. I had the slide container overflow set to inherit and not hidden - that is what was spilling in from the right hand side of the screen, allowing for the scrolling. As for the larger image - I would love to use a full size image like the demo but I cant seem to position the picture of the dog so it’s not cropped by the container and not so blown up; i.e. in your face. If I was able to figure that out I wouldnt have to worry so much about the position of the main slider. As it is now I am trying to thread a needle between the slider and image and the top header. I will check out the topic posted. Let me know what you think. thanks again

matt

Hi Matt,

Is possible, please share your site URL here, so I can take a closer look.

Regards,
Kharis

Hi Kharis

Can i PM you admim credentials - the site does not have any content so has an under construction wallpaper up. The site is vetwheels.com.

thanks
matt

Hi Matt,

Yes, you can. Email it to kharisblank@gmail.com and mention the link to this thread on your message body.

Regards,
Kharis

Hello -
I’ve downloaded the header footer scripts plugin and inserted the above code in the footer section, cleared my cache and am not having luck with reduction in header size. Any help is much appreciated.

Thank You!

Hi @bleighm,

Please try this solution. You can apply custom CSS code into Appearance > Customize > Additional CSS, instead of using other CSS plugin.

Regards,
Kharis

I deactivated the plugin and added the below CSS code into Additional CSS - no luck yet!

<script>
(function($){

$(window).on(‘load resize’, function() {

var slideHeight = $('#slideshow').height();
var newHeight = slideHeight-150;

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

});

})(jQuery);
</script>