How to not apply css on one section but apply on another same section in different collection

Shopify Discussion
1

Hey, so I was working on my draft theme, and I used a section on a collection and applied this CSS to that section.

@media (max-width: 479px) {
  .home-collections .collections-slider .item {
    flex: 0 0 20% !important;
    max-width: 20% !important;
  }
}
  @media (max-width: 479px) {
    .home-collections .collections-slider .item:last-of-type {
        padding-right: 0 !important;
        margin-right: 10px !important;
    }
}

Here’s the CSS, let me show you the screenshot of the section

1.JPG
1.JPG1885×702 91 KB

This Section is on my draft theme so you will have to navigate through End of Season > Ready to Wear

So basically I used this same section two times on my home page as well; let me show a screenshot.

2.JPG
2.JPG1904×942 241 KB

So basically the CSS I applied, it got applied onto these two sections as well and it’s making these two section small on mobile which I don’t want so how do I remove the css for only these two sections while making sure the css is applied onto that other section.

Here’s the URL of my draft theme: Click Here

2

You can add a class to body like and use this to differentiate between home and collection page like this
To use on collection pages

@media (max-width: 479px) {
 .template-collection .home-collections .collections-slider .item {
    flex: 0 0 20% !important;
    max-width: 20% !important;
  }
}
  @media (max-width: 479px) {
   .template-collection .home-collections .collections-slider .item:last-of-type {
        padding-right: 0 !important;
        margin-right: 10px !important;
    }
}
3

Can you elaborate a little more? I didn’t understand.

4

When you add this class template-{{ template }} to body then
you will see different class on body on every template like
index - template-index
collection - template-collection
product - template-product etc..
So, you can use this class to differentiate css on different templates
I hope, it is clear now.

5

So basically, I do it something like this?

Add CSS here
6

No, You have to use liquid variable template to make it dynamic like

and then use template-index, template-collection classes as parent in your css Like 
@media (max-width: 479px) {
 .template-collection .home-collections .collections-slider .item {
    flex: 0 0 20% !important;
    max-width: 20% !important;
  }
}
  @media (max-width: 479px) {
   .template-collection .home-collections .collections-slider .item:last-of-type {
        padding-right: 0 !important;
        margin-right: 10px !important;
    }
}

Thanks!

7

Can you give me an example of a detailed code to add so that I can add it to the coding?

8

You can check my above answer, you can add that class to body and paste that css in custom css or in section css, Above code will work on collection pages as i used template-collection as parent.
Please check if it work or you need further assistance