Discuss and resolve questions on Liquid, JavaScript, themes, sales channels, and site speed enhancements.
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);
}
}
Hi @bassieee
Can i take a look? Would you mind to share your Store URL website? with password if its protected. Thanks!
Hi @bassieee
You can try this one.
@media only screen and (max-width: 392px) {
.card__heading, .card-information span {
font-size: 20px;
}
.caption-with-letter-spacing.light {
font-size: 15px;
}
}
Discover how to increase customer engagement on your store with articles from Shopify A...
By Jacqui Apr 23, 2025Hey Community 👋 Did you know that March 15th is National Everything You Think Is W...
By JasonH Apr 1, 2025Discover how to increase the efficiency of commerce operations with Shopify Academy's l...
By Jacqui Mar 26, 2025