Flex Slider dots problem

Hi,

Thank you for the suggestion.

If using both landscape and portrait slides, we recommend using the ‘Disabled (Smart Crop)’ option for Image Cropping (found in the Advanced Options). This will ensure all slides are the same height.
https://www.metaslider.com/documentation/image-cropping/

Hi,

It is possible that some CSS from the theme or another plugin has resized some element of the slider. Could you send a link to the page the slider is on, and I can take a look.

Hey @lordvader, you can just fix this with some CSS.

Try this:

.metaslider .slides {
    display: inline-block;
}

And if you want some more space you can add margin-bottom too.

For the dots, just experiment with the margins. It depends on the design you want.

.metaslider .flexslider .flex-control-nav {
    margin: 0 0 0 -5px;
}

Awesome! If you want to adjust the margin a little more you would need to add it to the .slides rule, something like this:

.metaslider .slides {
    display: inline-block;
    margin-bottom: 2rem;
}

the second rule above is for the spacing between the dots. If you need to read up on how the margin property works, here’s a good resource

but it’s basically margin: top right bottom left. Maybe you left off the final -5px?

If you’re in Chrome browser you can right click on a dot to inspect and edit the CSS properties without worry to just see what looks best for you. I there you will see the 0 0 0 5px rule set.