Adjust Collections page - .card_information and h3 font-size .card_heading

Technical Q&A
,

Topic summary

A user wants to reduce the font size of h3 card headers on collection cards for screens 392px or less. While the CSS works in browser developer tools, Shopify’s theme editor flags .card_information and .card_header as invalid selectors in the section custom CSS box, and the code has no effect when added to the theme custom CSS.

Proposed Solution:
Another user suggests adding CSS directly to the theme’s stylesheet file (base.css, style.css, or theme.css) in the Assets folder:

@media only screen and (max-width: 392px) {
  .card__heading, .card-information span {
    font-size: 20px;
  }
  .caption.with-letter-spacing.light {
    font-size: 15px;
  }
}

The user is seeking a pure CSS solution without modifying source documents. The discussion remains open as the original poster has not confirmed whether the suggested approach resolved the issue.

Summarized with AI on November 16. AI used: claude-sonnet-4-5-20250929.
1

I want to decrease the font-size of the h3 card headers on my collection cards if the screen is 392px or less wide.

In browser it works if I put the following code in. However in the section custom CSS box Shopify indicates the .card_information and .card_header aren’t valid selectors. In the theme custom CSS box the error doesn’t come up but the code has no effect.

Does anyone know how to get around this? Looking for a pure CSS solution. I.e., not adjusting source documents.

@media only screen and (max-width: 392px) {
  .card_information {
   display: flex;
  align-items: center;
  justify-content: center;
  }
  .card_heading {
font-size: calc(var(--font-heading-scale) * 1.45rem);
}
}
1 Like
2

Hi @bassieee

Can i take a look? Would you mind to share your Store URL website? with password if its protected. Thanks!

1 Like
3

Thank you!

www.monkeysandmice.com

hello123

1 Like
4

@Made4uo-Ribe hope you can still have a look if you can :grin:

5

Hi @bassieee

You can try this one.

  • From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
  • Find the theme that you want to edit and click on “Actions” and then “Edit code”.
  • In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
@media only screen and (max-width: 392px) {
.card__heading, .card-information span {
    font-size: 20px;
}
.caption-with-letter-spacing.light {
    font-size: 15px;
}
}