Discuss and resolve questions on Liquid, JavaScript, themes, sales channels, and site speed enhancements.
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.
Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025Expand into selling wholesale with Shopify Academy’s learning path, B2B on Shopify: Lau...
By Shopify Jan 28, 2025