Nivo slider limit in smaller screensize?

[olaphoto]

I noticed that the Nivo-slider will show the pictures which are uploaded in full size when the window size will shrink to mobile-size. This makes the slider a jumpy feature (with pictures which have not the same size loaded in the Nivo-slider)…
Apart from a solution like uploading custom made Slideshow pictures of all the same height is there also a script which I could add so the slider ís/stays responsive (with relative sizechange) but not jumping (downwards; the content of the page drops down) anymore in smaller screen-sizes?

[olaphoto]

it looks like it jumps back to the original 400 pixels height… ? (but not in the proportions of the original 1000×400 px )

[Towfiq I.]

add this to your stylesheet, see of that changes anything:

@media screen and (max-width: 500px){
body .nivo-caption{position:relative!important;}
body .nivo-caption p{width:100%!important;}
}

[olaphoto]

Nope unfortunately not.. Tried adapting it IN the Mobile support also but still makes the pictures enlarge to the relative size in height.. I tried this though in the stylesheet > Mobile support

body .slider-wrapper{ height:relative!important;}

but then I noticed the “Slider Text” is going relative according to the bottomline of the pic but the NIVOslider itself not responsive anymore and now the image-cutoff-point remains 400px it does not shrink according to the relative width..

Hmm, I hope you will say ask something impossible because then I will have the task of adapting the slide pictures to standard sizes.. Otherwise I enjoy to figure out a method to have this working ! (to have the Slider responsive and going higher (than 400px) relative to the width of the screen, I guess to a certain limit or the thing would disappear of course.. 🙂

[Towfiq I.]

Sorry for the late reply.

height : relative is invalid, try this:

body .slider-wrapper{ height:auto!important;}

[olaphoto]

Hey Towfiq, no problem

I tried it yesterday and then it doesn’t want to abide the lower limit of 400px at all and then even shows the whole picture…
At least with the -> body .slider-wrapper{ height:relative!important;} <- it stays at 400px and hides the rest…
What I meant/hope to get is that the height of the NIVO-slider will be responsive too to it’s width, not only the pictures in it… Say: in fullscreen it is 1000×400 px and I hope it will responsive/relatively shrink to (moblie) 480×160 px ? Or do you think that is too small? The result will be I hope to have a less restless jumping up and down in a small-screen-mode of the top-part… (when one is uploading different size photos in the NIVOslider…)

[olaphoto]

Now: do I ask something strange? or am I just in a hunt for something which actually is virtually the same as Flex-slider?

[Towfiq I.]

if you want the height to resize to match its width. you will have to make change the height value to “auto”.

[Kevin]

Having the same issue at HighPeakChurch.com
I’m trying the same thing and your instructions didn’t work for me.

[Towfiq I.]

Kevin you are using a different theme. for your theme (Asteria Lite) there is an option to change the slider height from Appearance> Asteria Options> Slider. Change the height of the slider to 285px