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

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

bassieee
Tourist
7 1 2

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

 

 

 

 

Replies 4 (4)

Made4uo-Ribe
Shopify Partner
10132 2403 3037

Hi @bassieee 

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

If this fixed your issue, Likes and Accept as Solution are highly appreciated. Coffee tips fuel my dedication.
Get experienced Shopify developers at affordable rates—visit Made4Uo.com for a quick quote!
Need THEME UPDATES but have custom codes? No worries, for an affordable price.
bassieee
Tourist
7 1 2

Thank you!

 

www.monkeysandmice.com

hello123

Made4uo-Ribe
Shopify Partner
10132 2403 3037

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:
  • Made4uoRibe_0-1695814482103.png
If this fixed your issue, Likes and Accept as Solution are highly appreciated. Coffee tips fuel my dedication.
Get experienced Shopify developers at affordable rates—visit Made4Uo.com for a quick quote!
Need THEME UPDATES but have custom codes? No worries, for an affordable price.
bassieee
Tourist
7 1 2

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