Jump to content

How to use the 'except' command using css

Go to solution Solved by tuanphan,

Recommended Posts

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

Link to comment
  • Replies 6
  • Views 385
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

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. 

I'm Colin Irwin aka silvabokis.  I've been a Squarespace designer & developer since 2013. 
I remember when it was all wild prairies round these here parts. 🐃🤠
Advice I give on here is free, though I may sometimes post an affiliate link or promote something I've written.
That reminds me.. ..you might want to check out my
Squarespace template finder or have a look at my other Squarespace tips
Speaking of tips, 💲I've got a tip jar that you're welcome to throw a few quid into if you think I've helped you. 
If you're looking for a Squarespace developer 
Book a chat or Drop me a line - first meeting is always free  

 

Link to comment
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!

Link to comment
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

image.png.be726e44358897bf2ab3ddfd584fa626.png

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • Solution
11 hours ago, threadsonline said:

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. 

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;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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!

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.