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

[bassieee]

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);
}
}

[Made4uo-Ribe]

Hi @bassieee 

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

[bassieee]

Thank you!

www.monkeysandmice.com

hello123

[Made4uo-Ribe]

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;
}
}

• And Save. 
• You can change the font size you like. 
• Result:
• 

[bassieee]

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