How to use the 'except' command using css

Hi guys,

I am currently using the following code so that on mobile display my carousels show up 2 columns rather then 1. 

@media screen and (max-width:767px) {
body.homepage ul.user-items-list-carousel__slides {
    grid-template-columns: repeat(2,1fr) !important;
}
}

I have three carousels on my home page, the first two are the ones I want to use the above code for, but I want the last carousel to only show 1 column at a time.

However, because of the code, all three carousels are showing 2 columns. How do I get the last carousel to be excluded from the above code? 

Site: https://threadsonline.co.uk/

Password: welcome

I can't test it but this should work:

@media screen and (max-width:767px) {
body.homepage :not(section[data-section-id="664e270187912421880cb099"]) ul.user-items-list-carousel__slides {
    grid-template-columns: repeat(2,1fr) !important;
}
}

It's telling the code to only apply to sections that don't have the id  of the section that contains the last carousel. 

9 hours ago, colin.irwin said:

I can't test it but this should work:

@media screen and (max-width:767px) {
body.homepage :not(section[data-section-id="664e270187912421880cb099"]) ul.user-items-list-carousel__slides {
    grid-template-columns: repeat(2,1fr) !important;
}
}

It's telling the code to only apply to sections that don't have the id  of the section that contains the last carousel. 

Hm unfortunately this doesn't seem to be working... I replaced my old code with this one but it didn't change anything. Any other ideas? I've checked the rest of my custom css and I don't think I have any conflicting codes running.

P.S. The section ID you used in your code was actually for a different section, not the third carousel (the third carousel on my homepage is actually hidden on desktop view, so there is 2 carousels on desktop but 3 on mobile). Of course I just replaced this with the section ID of the third carousel (below), but nevertheless this didn't work.

section[data-section-id="664f1c4cc443c128632ff36b"]

Thanks for your time!

On 5/24/2024 at 5:45 AM, threadsonline said:

Hm unfortunately this doesn't seem to be working... I replaced my old code with this one but it didn't change anything. Any other ideas? I've checked the rest of my custom css and I don't think I have any conflicting codes running.

P.S. The section ID you used in your code was actually for a different section, not the third carousel (the third carousel on my homepage is actually hidden on desktop view, so there is 2 carousels on desktop but 3 on mobile). Of course I just replaced this with the section ID of the third carousel (below), but nevertheless this didn't work.

section[data-section-id="664f1c4cc443c128632ff36b"]

Thanks for your time!

I see it already fine to me, you try checking it again

11 hours ago, tuanphan said:

I see it already fine to me, you try checking it again

Hi Tuan, I want that last carousel to only display one column but it's showing two as I am using a code to display 2 columns on the other carousels. 

9 hours ago, tuanphan said:

Use this to Custom CSS then save & reload the site

@media screen and (max-width:767px) {
body.homepage section[data-section-id="664f1c4cc443c128632ff36b"] ul.user-items-list-carousel__slides {
    grid-template-columns: repeat(1,1fr) !important;
}
}

 

Ah yes of course, thank you worked perfectly!