I can't change the background of the card on my List Section: Banner Slideshow.

Site URL: https://www.victorybusinessnetwork.ca/

I need to put cards behind the text on the banner slideshow on the homepage, but I also need to be able to see the photos underneath. My idea is to make the card transparent like the navigation arrows.

For some reason the site styling doesn't let me edit the background colour of the card (the green box under the text) so I'm hoping to do it through the CSS. The website is victorybusinessnetwork.ca. Any ideas??

past this code in custom css box

.bright-inverse .user-items-list-banner-slideshow .list-item[data-is-card-enabled="true"] .list-item-card-background {
    background-color: ;
}
.user-items-list-banner-slideshow .list-item[data-is-card-enabled="true"] .list-item-card-background {
    background-color: ;
}

@Mdhanjal So this works perfectly when my CSS screen is open, but it hasn't changed when I view the site, or even access the page from other parts of Squarespace.

I've made sure to save the changes and I cleared my cache. Do you know why this might be happening?

Found the problem, had to add !important to make it override the original styling:

.bright-inverse .user-items-list-banner-slideshow .list-item[data-is-card-enabled="true"] .list-item-card-background {
    background-color: !important ;
}
.user-items-list-banner-slideshow .list-item[data-is-card-enabled="true"] .list-item-card-background {
    background-color: !important ;
}

let me check again

On 9/10/2021 at 10:03 AM, JenFierbach said:

Found the problem, had to add !important to make it override the original styling:

.bright-inverse .user-items-list-banner-slideshow .list-item[data-is-card-enabled="true"] .list-item-card-background {
    background-color: !important ;
}
.user-items-list-banner-slideshow .list-item[data-is-card-enabled="true"] .list-item-card-background {
    background-color: !important ;
}

Hi,

Have you solved it yet?