Brooklyn theme slideshow sections not working on mobile

I have used the slideshow section in the body of my website to create sections for each of my offerings. It looks good on desktop but not good at all on mobile. The image is there but the text is underneath on the next line.

The slider image on the header works perfectly, It’s just the other three in the body.

URL:

www.yknott.com

Hope someone can help soon.

MOBILE IMAGE

DESKTOP IMAGE (WHAT IT SHOULD LOOK LIKE)

Hi @yknott ,

Please check of there is any issue with internet of your mobile. I tried to check on my phone and it’s working well.

@yknott

We have checked for this issue in real system and browserstack but it is working ok. In which system configuration or browser you are checking?

@Fenalrado

Sure. That would be great.

@Dan-From-Ryviu Very strange. I had a number of people check it on mobile both iPhone and Android (Chrome or Safari) and it’s not working for any of us.

@KetanKumar I don’t understand what’s happening here. I had a number of people check it on mobile both iPhone and Android (Chrome or Safari) and it’s not working for any of us.

@yknott , are you guys using the same internet network? Did you try to use 4G and check?

@yknott

oh sorry i have check this also devices but its work as well

Not the same network. I had people check it that live in different cities.
I have done Wifi and LTE. Also, I cleared my cache before checking.

oh sorry for that if possible to share your video how to check your end so i will check same way maybe i will try to test anther way

@Fenalrado @that would be amazing!

After doing a little more digging, this is only an issue when I change the slide height to “adapt to first image”. It must be a glitch.

@KetanKumar

Found your solution on another post and it worked perfectly for me!

@media screen and (max-width: 768px) {
.hero–adapt .hero__text-align {
display: table !important;
}
.hero__adapt-text-wrap .hero__text-content {
display: none !important;
}
}