Changing category card text for mobile and desktop

Solved

Changing category card text for mobile and desktop

WeSellGoods
Visitor
2 0 0

Hi there 👋

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.pngScreen1.png

Accepted Solution (1)

Zeel-prajapatii
Shopify Partner
138 32 27

This is an accepted solution.

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 */
}
➔ Was I helpful , please don't forget to like and mark solution as an accepted solution , you can PM me.
➔ Software engineer : Having more than 3 years of experience in the related industry with the specialization of Shopify theme development , worked on hundreds of stores.
➔ Want to hire me? Email me

View solution in original post

Replies 2 (2)

Zeel-prajapatii
Shopify Partner
138 32 27

This is an accepted solution.

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 */
}
➔ Was I helpful , please don't forget to like and mark solution as an accepted solution , you can PM me.
➔ Software engineer : Having more than 3 years of experience in the related industry with the specialization of Shopify theme development , worked on hundreds of stores.
➔ Want to hire me? Email me
WeSellGoods
Visitor
2 0 0

Worked like a charm. Thank you,