Layerslider text overflowing box in mobile version portrait view.

Hi,

Making a new site, and I need to have alternate layer sliders for mobile and desktop view.

This is an example: https://nycartdirector.com/temp/about-faith-2/

css to hide and show desktop and mobile I’m using:

/* about page layersliders*/
@media only screen and (min-width: 767px) {
#layerslider_135{
display:none!important;
}
}

@media only screen and (max-width: 767px) {
#layerslider_11{
display: none !important;
}
}

So this works except the text box on the mobile version slider displays properly in landscape view, but the text runs out the bottom of the text background color in portrait view. I can sort of make it work for the portrait mode by setting breaks on each line and making the box a specific height rather than auto, but it’s sloppy and then I have to make a separate version for the landscape mode, and wind up with three sliders.

You can see the issue here:
works correctly:
https://nycartdirector.com/temp/wp-content/uploads/2020/03/IMG_1538.png
works incorrectly:
https://nycartdirector.com/temp/wp-content/uploads/2020/03/IMG_1537.png

Is there some code to make the background for the text act correctly in a responsive manner for the two view modes on mobile? It seems now the portrait view seems to fit the same number of lines depth wise even though it breaks two lines longer.

Also the slider on the mobile version swipes right to a slider from a different page altogether, I can’t figure why?

Thanks so much