How can I resize slideshow text for mobile view?

[September28]

Hi,

I am struggling to get the home page slideshow text to resize when viewed on a mobile. Half the text is currently cut off. Changing the values of the text via 'customize theme' has no effect on a mobile device. It does work on the full-screen version, and I've got that looking okay.

I have tried to adapt the code in numerous ways but nothing works. The section-slideshow.liquid already has a section of code that appears to be trying to resize the text but seemingly does nothing (see below). I have fiddled around with the values but nothing changes. 

<style>
.swiper-slide-{{ block.id }}.swiper-slide-active .heading{
color: {{ headingColor }}; font-size: {{ headingSize }}; -webkit-animation-name: {{headingAnimation }}; animation-name: {{ headingAnimation }}; -webkit-animation-delay: {{ headingAnimationDelay }}; animation-delay: {{ headingAnimationDelay }};
}
.swiper-slide-{{ block.id }}.swiper-slide-active .subheading{
color: {{ subheadingColor }}; font-size: {{ subheadingSize }}; -webkit-animation-name: {{ subheadingAnimation }}; animation-name: {{ subheadingAnimation }}; -webkit-animation-delay: {{ subheadingAnimationDelay }}; animation-delay: {{ subheadingAnimationDelay }};
}
.swiper-slide-{{ block.id }}.swiper-slide-active .cation{
color: {{ captionColor }}; font-size: {{ captionSize }}; -webkit-animation-name: {{ captionAnimation }}; animation-name: {{ captionAnimation }}; -webkit-animation-delay: {{ captionAnimationDelay }}; animation-delay: {{ captionAnimationDelay }};
}
.swiper-slide-{{ block.id }}.swiper-slide-active .caption-link{
-webkit-animation-name: {{ buttonAnimation }}; animation-name: {{ buttonAnimation }}; -webkit-animation-delay: {{ buttonAnimationDelay }}; animation-delay: {{ buttonAnimationDelay }};
}

@media (max-width: 1199px) and (min-width: 992px){
.swiper-slide-{{ block.id }}.swiper-slide-active .heading{
font-size: 120%;
}
.swiper-slide-{{ block.id }}.swiper-slide-active .subheading{
font-size: 256%;
}
.swiper-slide-{{ block.id }}.swiper-slide-active .cation{
font-size: 112%;
}
}
@media (max-width: 991px) and (min-width: 768px){
.swiper-slide-{{ block.id }}.swiper-slide-active .heading{
font-size: 104%;
}
.swiper-slide-{{ block.id }}.swiper-slide-active .subheading{
font-size: 200%;
}
.swiper-slide-{{ block.id }}.swiper-slide-active .cation{
font-size: 96%;
}
}
</style>

I have also tried to add code to the end of the CSS that only applies to smaller screens (no joy).

@media only screen and (max-width: 1080px) {
   .swiper-slide. Heading {
        font-size: 80%;
    }
}

Thanks in advance if you think you can help.