How to customize the CSS for collection titles only, without affecting product titles?

[famubarik]

Hello everyone,

I'm trying to change the font size of my collection titles on my Shopify store (www.malbusaat.co.uk) . Currently, when I use the .card__heading selector, it also changes the font size of the product titles. How can I target only the collection titles and customize their CSS without affecting the product titles? 

at the moment i do have these customisations;

.card__heading {
text-transform: uppercase;
word-spacing: 2px;
letter-spacing: 1px;

@media (max-width: 768px) {
font-size: 12px;
}
}

.card__heading .icon-wrap {
display: none !important;
}

Thank you in advance.

[famubarik]

[famubarik]

Thank you, but this is the issue, I couldn't find the selector for the collection titles only. 
all i can find is .card__heading, which is using for the both collection and product titles. 

[steve_michael2]

Hi @famubarik,

To customize the font size for only the collection titles without affecting product titles, you need to be more specific in your CSS selectors. Here’s how you can adjust it:

1. Inspect Elements: First, use the browser's developer tools (Right-click > Inspect) to find the HTML structure of the collection title. Look for any unique class or parent element specific to collections.

2. Updated CSS Suggestion: Try using the following CSS by refining the .card__heading selector based on its context (like a parent container unique to collections). For example:

/* Targets collection titles specifically */
.collection-card .card__heading {
  text-transform: uppercase;
  word-spacing: 2px;
  letter-spacing: 1px;
  font-size: 18px; /* Adjust as needed */

  @media (max-width: 768px) {
    font-size: 12px;
  }
}

/* Optional: Hide icons only in collection titles */
.collection-card .card__heading .icon-wrap {
  display: none !important;
}

[famubarik]

this code you provided also not working, I can't save when entered the above code in the theme css in customizer. It says unable to save.