Reduce size of slider image

Hi there

On my page www.bioniccycling.co.za, I am trying to reduce the size of the header so that the text below is more visible. I tried adding code from a previous post but it didn’t seem to work.

Please assist, thanks, Jeanne

Hello there,

Please try adding the following CSS code into your site’s additional CSS option under Appearance > Customize > Additional CSS.


.header-slider {
   height: calc(100vh - 140px) !important;
   height: -moz-calc(100vh - 140px) !important;
   height: -webkit-calc(100vh - 140px) !important;
}

@media only screen and (min-width:992px) {

   .header-slider {
      height: calc(100vh - 116px) !important;
      height: -moz-calc(100vh - 116px) !important;
      height: -webkit-calc(100vh - 116px) !important;
   }
   
}

Regards,
Kharis

Hi there, thanks I have done so but nothing has changed…

Hi There

I haven’t received a response yet, please help?

Thanks
Jeanne

Hello there,

I noticed that the code is no longer applied. Could you please try to reinsert it and make sure the group of you custom CSS code is error free. You can check it by using this tool. Try clearing your web browser’s cache before reloading your site to see the code addition takes affect.

Regards,
Kharis

Hi there

Thanks so much , I cleaned the code but it still isn’t working :frowning: I cleaned the cache as well. Which values would I change to change the height? I tried changing the 116px values but nothing changed either.

Thanks
Jeanne

Hi Jeanne,

I just checked your site. The new code addition seems to be working properly as seen on the following screenshot:

Cloudup

Cloudup

Please try to access your site with other device or network. There might be network cache applied on your end.

Regards,
Kharis

Thanks Kharis

It looks very much the same as before. How can I further reduce the size of the image? When I changed the height values (116px) , the slider height did not adjust?