Adjust text size when viewing a collection via mobile phone

Store Design
1

Hello everyone, I’m currently working on a Shopify website - specifically the “Babs” theme. I downloaded the theme and uploaded it to Shopify. Hey @PageFly-Victor , maybe you can help me?

But I have a few problems that need to be solved.

Problem 5:

“Adjust text size when viewing a collection via mobile phone.”

When I view a collection on my mobile phone, such as the main collection ‘Buitengebouwen’ (https://www.gardies.nl/collections/buitengebouwen), I see that the font displayed for the sub-collections is very clear and easy to read. For example, the text ‘accessoires voor partytenten’ is clear and legible. However, when I click on the ‘accessoires voor partytenten’ collection, the text/title of the collection becomes very large and difficult to read. How can I ensure that I get the same font size and clarity as the overview that was displayed before at (https://www.gardies.nl/collections/buitengebouwen)? This needs to be done for every collection when viewed on a mobile phone.

The website is www.gardies.nl

2

Hi @Gardies

Kindly paste below CSS to appropriate css file for your theme at the bottom.

@media screen and (max-width: 768px){
.collection-hero .hero-header h2 {
	font-size: 26px;
}
}
3

Hi @Sheesh_b ,

Thank you for replying!
Do you also know in which css file i should add the code? I hope you are also able to help me with that.

4

Hi @Gardies

Yes, it’s dt-framework.css file and you can find that in assets.

Sheesh_b_0-1683053061210.png

Thanks

Sheesh B