Slider - Change Size

Hi,

I would like to reduce the height of the slider so that it fully displays above the fold. Approximate height would be 400px. The width is fine.

Could you please provide CSS to make this change? I will also need recommended image size to fit new slide dimensions.

website: http://dr-ron.cdn4media.com/

As always - THANK YOU!

 

Hello,

Go to Appearance > Theme Options > Styling Options > Custom CSS
And paste following code in Custom CSS and press Save All Changes button.

Code:

.slider_container {
height:400px;
}
.sy-slides-wrap {
height: 400px;
}
@media only screen and (max-width: 767px){
.slider_container {
height: 320px;
}
.sy-slides-wrap {
height: 400px;
}
}
@media only screen and (max-width: 480px){
.slider_container {
height: 250px;
}
.sy-slides-wrap {
height: 250px;
}
}

No need to change image size.
This will solve your issue.

Thanks & Regards
Yogesh Bhade

 

Thank you. Works as wanted - although part of image is cutting off more than wanted. Understanding that Ken Burns is a focus based transition - is there a way to minimize the focus so more of the image shows. I tried by working with these:

.sy-slide.kenburns {
width: 140%;
left: -20%;
}
.video.sy-slide.kenburns {
left: -20%;

Neither would solve issue, so have to believe I am missing a css change. Your assistance is most appreciated.

 

Hello,

Hello,

Go to Appearance > Theme Options > Styling Options > Custom CSS
And paste following code in Custom CSS and press Save All Changes button.

Code:

@media only screen and (max-width: 767px){
.sy-slide > a > img {
width: 140%;
}
}
@media only screen and (max-width: 767px){
.sy-slides-crop{
height:80%;
}
}

We can't do any more customization in your theme.
Hire a freelancer for more customization.

Thanks & Regards
Yogesh Bhade