How to fix flex-control-nav

  • Hi, how can I fix the position for the flex-control-nav? At the moment I have images of different sizes on the slider, every time the image changes the flex-control-nav goes with it. Example, if the image is big, the flex-control-nav goes to the bottom of the page, if the image is small the flex-control-nav goes to the top of the page. I’d like to fix the position of the flex-control-nav to the bottom of the div so it stays there regardless of the image size.

    Any thought how this can be achieved?

    https://www.ads-software.com/plugins/ml-slider/

Viewing 1 replies (of 1 total)

  • Hi RoRW,

    You will need to set a minimum height (set to the same height as the tallest image) using the following CSS (added to your themes style.css file)

    .metaslider-123 .slides {
    min-height: 500px;
}

    (make sure you replace 123 with your slideshow ID)

    Warning: You will lose the responsive properties of Flex Slider when you do this.

    Ideally I think you should make all of the images the same width and height, so that the slideshow doesn’t change height in the first place. To do this, you could enable ‘smart crop’ (but you’ll lose the top and bottom of your taller images), or you could add padding to the left and right of the tall images using an image editor. There are more details on this page: https://www.metaslider.com/documentation/image-cropping/

    Regards,
    Tom

Viewing 1 replies (of 1 total)
  • The topic ‘How to fix flex-control-nav’ is closed to new replies.