how can I change the height of a jquery flexslider belongs to jquery.flexslider-min.js file?

Question

My wordpress theme contains a jquery flexslider (version:jquery.flexslider-min.js) and the problem is that when I've tried to change the height of it by modifying the height parameter of the slider (by setting fix and auto) in .css and uploading narrower pictures it appeared that the slider was displayed in the intended shape but the navigation arrows (left, right) got to the bottom of the slider instead of its original place in the middle.

I would be really thankful if someone could help and give an exact solution to the problem.

Thank you in advance.

Answer 1

Without seeing your code it's hard to say exactly what the problem is, but I have had this issue in the past when positioning items using a static value. Essentially, the height changes but the static position doesn't which leaves your element offset a bit. If this is your issue you can fix it like this:

HTML

<div class="flex-nav-container">
    <ul class="flex-direction-nav">
        <li><a class="flex-prev">Previous</a></li>
        <li><a class="flex-next">Next</a></li>
    </ul>
</div>

CSS

.flex-nav-container { position: relative; height: 300px; //or whatever }
.flex-direction-nav a { position: absolute; height:30px; top: 50%; margin-top: -15px; }
.flex-prev { left: 0; }
.flex-next { right: 0; }

That will center the top of the arrow element to the 50% spot on the slider's height. By adding the negative margin as half of the height of the arrow you are essentially centering the arrow vertically regardless of the height of the slider.

JSFiddle Demo

Try changing the height of .slider to see what is actually happening. I added some color to show the elements.

Answer 2

Using CSS:

.flexslider .slides img {
   max-width: 100%; 
   height: 748px; //set height in pixel here
   display: block;
 }