Collection List - Text Being Cut Off (Trade Theme)

Technical Q&A
,
1

Hi all,

Can you help me with the setting for the text on the collection list?

Currently, the text on the category list is being cut off.

I’m using Trade theme.

This is the mobile view

monika24_0-1727713320377.png
monika24_0-1727713320377.png412×386 97.8 KB

And on desktop:

monika24_2-1727709388384.png
monika24_2-1727709388384.png1868×704 159 KB

I have tried the suggestion to change the font size by using this custom CSS

@media screen and (min-width: 480px) {
  .collection-list .card__inner {
    width: 150px;
    height: 150px;
    margin: 0 calc(10% / 2);
  .collection-description {
    font-size: 8px;
  }
}

but the problem persists.

Any help would be greatly appreciate!

2

Hi @monika24

Could you share your store URL?

3

Here’s the url

https://ecoblue-es.myshopify.com/

4

Did you change collection name to solve the issue?

5

I did, couldn’t fool this bug though :joy: it works for this specific screenshot but there are other categories which names are truncated even when the truncation is set off for 100 characters ?

1 Like
6

The problem is that the length of your category names is longer than the width of the section.

7

Thanks. I solved it :grinning_face: some by changing the length of the category name and combining with coding adjustments (got help from a collaborator onsite)