Collection Titles txt size mobile version refresh theme

Store Design
,
1

Hello,

I’m using the Refresh theme and I’m trying to make the “Collections” titles smaller on the mobile version of my website.

I’ve tried some codes I find in other post but nothing worked so far.

Does anyone know how can I fix this?

IMG_5090.PNG
IMG_5090.PNG1179×2556 327 KB

Thanks so much in advance for your help :folded_hands:

2

hi @sonickas12 Hi there,

If you’re using the Refresh theme, you can adjust the collection titles specifically for mobile by adding a small CSS snippet. Here’s how you can do it:

  1. Go to Online Store → Themes → Customize.

  2. Click the three dots (⋮) in the top-left corner and select Edit code.

  3. In the Assets folder, open base.css (or theme.css, depending on your theme).

  4. Scroll to the bottom and paste this code:

@media screen and (max-width: 749px) {
.collection-list__title,
.collection-list h2 {
font-size: 16px !important;
}
}

ou can adjust the 16px value to whatever looks best for your site.

After saving, refresh your mobile view to check if the titles appear smaller.

Let me know if this works for you — the Refresh theme can sometimes use slightly different class names depending on your layout.

3

Hello,

thank you, I’ve tried this but unfortunately this didn’t work. Is it maybe because when I ‘build’ the collection page I have choose each collection separately not just all my collections ? (screenshot)

Screenshot 2025-10-10 124907
Screenshot 2025-10-10 1249071834×709 160 KB

4

Hi @sonickas12 ,

  1. Go to Online Store → Themes → Customize.
  2. Click the three dots (⋮) in the top-left corner and select Edit code.
  3. In the Assets folder, open base.css (or theme.css, depending on your theme).
  4. Scroll to the bottom and paste this code:
@media screen and (max-width: 749px) {

.collection-list-wrapper .title-wrapper-with-link h2 {
    font-size: 24px;
    padding: 0 0 0 1.2rem;
}
}
5

Hello,

thank you this worked for the word ‘Collection’ text size but I would like to make each collection title text smaller.

6

Hi @sonickas12 ,

Replace the previous code with this one :

@media screen and (max-width: 749px) {

.collection-list-wrapper .title-wrapper-with-link h2 {
    font-size: 24px;
    padding: 0 0 0 1.2rem;
}
.collection-list .card h3.card__heading a {
    font-size: 12px;
}
}
1 Like
7

Perfect this worked thank you so much!

1 Like