How do I make it so the text is responsive on the collections page?

Store Design
1

131926481_2068108686653019_4655851071578562688_n.jpg
131926481_2068108686653019_4655851071578562688_n.jpg828×1792 117 KB

132955765_1592207457646751_3725851446347310277_n.jpg
132955765_1592207457646751_3725851446347310277_n.jpg828×1792 94.2 KB

On my homepage (second image), I managed to change the text is responsive for when I go on my mobile but on my collections page, I can’t seem to figure it out. Could you please help me make it so that the text is contained within the grid?

Site: shop-punico.com/collections
Password: squishy

Thanks!

2

@tapi-oca

Please add the following code at the bottom of your assets/theme.css file.

@media only screen and (max-width: 749px){
.template-list-collections h3, .template-list-collections .h3 { font-size: calc(((var(--font-h3-mobile)) / (var(--font-size-base))) * 1em) !important }
.template-list-collections .h1, .template-list-collections h1 { font-size: calc(((var(--font-h1-mobile))/ (var(--font-size-base))) * 1em) !important; }
}

Hope this works.

Thanks!

3

Works perfectly! Thank you