Reduce the size slider

Hi, I want to reduce the size of the slider, and for this i use this CSS code:

.header-slider {
    height: 450px !important;
}

and it work.

https://drive.google.com/file/d/0ByHaJNJbxpfQb1NEaWVaOHFzV2c/view?usp=sharing

The problem is it don’t reduce the size of the image but cut the image, how can I do?
i want see the all image

https://drive.google.com/file/d/0ByHaJNJbxpfQSExhSGhpVy1aSm8/view?usp=sharing

Hello there,

Please go to Appearance > Customize > Header Area > Header Image > find the option that says “Header background size”, then enable “Contain”.

Regards,
Kharis

Thanks for your reply,
But this option change the size only to the header image and not to the header slider…

Done,
i add this css

@media only screen and (min-width: 1920px) {
   .slides-container .slide-item {
      background-size: contain !important;
   }
}

Sorry but this css don’t work very well.
Another idea?

Hello there,

Please see this thread. You would do viewport breakpoint adjustment accordingly.

Regards,
Kharis

Thanks!! it work!!

Hello Kharis, I am using the Sydney theme.child.

I have read through this thread and then went to the other thread “Slider Images not resized for iphone6” that you suggested, I then downloaded css and entered the code,however, the issue is it reduces the size of the picture in the header/slider, but only on the first slide.

When it goes to the second and third slides they are still full screen.

The good news is on the first slide it shows a bit of the page under the fold but I want it to show enough that the viewer can see the words “Our services” in the next block without having to scroll.

Yes I have reduced the padding both in the ROW and in the widget but still can’t get the words to come high enough to show in the white space below the picture, without scrolling.

Yes I have played with all the numbers in the css looking to adjust heights etc but no joy.

Any ideas would be greatly appreciated.

Thank you in advance.

Cheers,
Bronson.

Dear Bronson,

Thank you for posting in. As this thread has been marked as “Resolved”, would you please open your own thread here? Please share the link to your site, so I can have a closer look.

Regards,
Kharis

Hello there.

I too am trying to increase the height of the slider. I’ve tried all the options in this thread (and quite a few more) but nothing seem to change it. I changed the height of the slider some time ago but somehow it’s not responding to any changes I make now.

Can you offer any advice in this regard?

Thanks
Brendan

Hello Brendan,

Please add the below custom CSS code into Appearance > Customize > Additional CSS in your site dashboard.


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

100vh means 100% of the web browser’s window height.

Make sure the full screen slider is enabled. You can check it from Appearance > Customize > Header area > Header Slider > Slider mobile behavior.

Regards,
Kharis

Hi Kharis

Thanks for replying.
I tried your code but it has not worked. I cant find the “Slider mobile behavior” option that you mentioned. But I do have the “Select the header type for your front page” set to “Slider”, under the “header type” option.

Any other suggestions?

Thanks

Hello there,

I am sorry to mention that this slide mobile behavior option is available in the latest version of Sydney. Please go to theme administration panel and then make sure your active Sydney theme has been updated.

Regards,
Kharis

Hi Kharis

I have updated the Sydney theme and I have enabled “the full-screen slider” option. I still cant get the code you provided to work.
Can you make any other suggestions?

Thanks

Have you enabled the full screen slider from Appearance > Customize > Header area > Header Slider > Slider mobile behavior?

Regards,
Kharis

Hi Kharis

Yes, I have.
I found it here: Header area --> Header Slider --> Slider mobile behavior --> Full screen

Hi Kharis

Yes, I did that.