Empty Space after classic slider element

[Mindstormer]

Hi,

I inserted a classic slider into my page and for the life of me can’t figure out how to remove the space after the paragraph or the fact that it skips bigger after switching to the first slide. Please advise. www.adventprinting.com/lifehacks

[Prasant]

Hello @Mindstormer,

Thanks for reaching out.

Please add following CSS under Pro > Theme Options > CSS:

.x-flexslider .x-slides .x-slide {max-height: 45vh;
}

1- I have found the proper CSS code selector using the Chrome browser Developer Toolbar: https://www.youtube.com/watch?v=wcFnnxfA70g

2- For the CSS code itself, I suggest that you get started with this tutorial: https://www.youtube.com/watch?v=yfoY53QXEnI

Thanks.

[Mindstormer]

Done, but no improvement.

[rad]

Hi @Mindstormer,

Please replace that CSS with this,

    .x-slide:not(.flex-active-slide) {
display: none !important;
    }

Hope this helps.

[Mindstormer]

@Rad

.x-slide:not(.flex-active-slide) {
display: none !important;
}

Thanks, this improved part of it, but as soon as the slider navigates to the next slide and back to the first, there is still a persistent (though smaller) gap.

[ruenel]

Hey @Mindstormer,

To resolve your issue, please add the following CSS code in the X > Theme Options > Global CSS (http://prntscr.com/evui3r)

.x-flexslider-shortcode-container {
    margin-bottom: 0;
}

Hope this helps. Kindly let us know.

[Mindstormer]

Still there on the second slide. Resolved on the first.

[ruenel]

Hello @Mindstormer,

Update the code using this:

.x-flexslider-shortcode-container,
.x-flexslider .x-slides .x-slide p {
    margin-bottom: 0;
}

.x-flexslider .x-slides .x-slide p:empty {
  display: none;
}

Please let us know how it goes.

[Mindstormer]

Perfect! Thanks.

[ruenel]

You are most welcome!