Slider size


I would like to reduce the size of my slider to not take up the whole page and maybe just take up 50% instead. So the second block of my page is shown as well without the visitor having to scroll down.

How do i do this?

Thanks in advance!

Hello there,

To reduce its height, you can add the following CSS code into Appearance > Customize > Additional CSS:

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


Hey! thanks but this css rule didn’t do anything at all. Tried both on my site and on your demo (web tools)

Do you have other CSS code prior that code? If so, please check with this tool whether they are error free.


Everything is fine in the code. I do think i found the problem tho. There is a css rule written in the html on the header-slider div.

transition: height 99999s;
transition-property: height;
transition-duration: 99999s;
transition-timing-function: initial;
transition-delay: initial;

Hello there,

Thank you for updating me. I am glad to know you figured it out. I am marking this thread as resolved. If you have any other questions, please let us know in a new topic.

Have a nice day!