New Shopify Certification now available: Liquid Storefronts for Theme Developers

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
4222 977 1189

Hi @bassieee 

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

Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
Need a knowledgeable developer? Come and visit us at

Made4uo.com


bassieee
Tourist
7 1 2

Thank you!

 

www.monkeysandmice.com

hello123

Made4uo-Ribe
Shopify Partner
4222 977 1189

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
Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
Need a knowledgeable developer? Come and visit us at

Made4uo.com


bassieee
Tourist
7 1 2

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