Changing category card text for mobile and desktop

Store Design
, , , , ,

Topic summary

A user needed to modify category card text styling for desktop view without affecting product card text. They attempted using @media queries in component-card.css, but the changes unintentionally applied to both card types.

Problem:

  • CSS targeting .card__heading affected both collection cards and product cards
  • Using individual IDs would be impractical and error-prone across the entire homepage

Solution provided:
Another user suggested using a more specific CSS selector:

.collection-list__item .card__heading {
  /* Custom CSS here */
}

This targets only collection card headings by combining the parent class .collection-list__item with .card__heading, allowing separate styling for category cards versus product cards.

Outcome: The solution worked successfully, resolving the issue.

Summarized with AI on November 12. AI used: claude-sonnet-4-5-20250929.
1

Hi there :waving_hand:

Im currently trying to change my category card text on desktop via an @media line in the component-card.css. It works as intendend but also changes the normal product card texts (see pictures).

I tried the not :not tag but the class “card__header h5”, as shown as in inspection, doesn’t work.

Including the single IDs works but would be very tidiouse for the whole homepage and bug prone.

I’m looking for a way now to adjust the two texts seperatly.

Any suggestions?

Website is: wesellgoods.co

Code I used in component-card.css:

@media only screen and (min-width: 750px) {
  .card__heading{
  position: absolute !important;
  margin-right: -30% !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, 450%) !important;
  color: white !important;
  z-index: 2 !important;
  text-align: left !important;
  width: auto !important;
  max-width: 100% !important;
  font-size: medium !important;
  }
}

Screen 2.png
Screen 2.png1913Ă—947 354 KB

Screen1.png
Screen1.png1891Ă—949 439 KB

2

Hey @WeSellGoods use below code and apply css you want it will apply only on the collection lists.

.collection-list__item .card__heading{
/* WRITE YOUR CSS HERE */
}
1 Like
3

Worked like a charm. Thank you,