How to create a full-height slider when the flex-control-nav overlaps the slide?

Hi @kalibaot

Thanks for using MetaSlider. Could you share a link to the slideshow you’re working on? Or it’s not possible, share a screenshot that shows what you’ve done so far.

Thank you for your response. Please take a look at the image I’ve attached. I want the height of the slider to always display the red portion.

Hi @kalibaot,

is possible to have a link of your website to preview the slideshow? That will allow us to have a better context of your question. If that is not possible, please export the slideshow and share through Google Drive link. Also share the image you are using in the slide from the screenshot

Regards

Hi @htmgarcia,

Here are the Google Drive links for the slider and the image I used.

Thanks!

According to my test in local using the export file, I see some spacing below that can be removed with this CSS:

.metaslider .flexslider{
margin-bottom: 0 !important;
}

Thank you for your support. I have managed to solve the issue with the following CSS code, and I hope it will help others who encounter a similar problem.

.metaslider .flex-control-nav {
	bottom: 1rem !important;
}

.metaslider,
.metaslider > div,
.metaslider .flexslider,
.metaslider .slides,
.metaslider .slides li,
.metaslider .slides img {
	height: 100% !important;
}

Thanks for posting that and for using MetaSlider, @kalibaot