Liquid, JavaScript, themes, sales channels
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;
}
}
User | RANK |
---|---|
37 | |
24 | |
13 | |
13 | |
9 |
Transform this holiday season into a shopping spree. Plus, learn how to effortlessly open ...
By Jasonh Dec 8, 2023Make the shift from discounts to donations, and witness your business not only thrive fina...
By Holly Dec 4, 2023On our Shopify Expert Marketplace, you can find many trusted third party developers and fr...
By Arno Nov 27, 2023