CODEWITHSUNDEEP
cssslick.js
Anastasia Stallcop
Anastasia Stallcop

Reputation: 21

Slider showing grey "background image" on mobile

Need an assist. I have table set as a slider (using slick slider js). When I try to scroll all the way to the very right - beyond the table container a grey image appears that says "background image" shows up on mobile iphone safari and chrome, desktop safari responsive view (but not chrome desktop browser set to iphone preview).

Reference image 1 Reference image 2

Any ideas how to hide? I tried setting all my containers to both transparent and white and neither resolved.

I figured it's connected to div-block-85 so i tried this with no success:

<style>

.div-block-85 { 
        background-color: transparent; !important; 
}
</style>

Codes I tested:

<style>

.wrapper w-dyn-list div { 
        background-color: white !important; 
}

.section-8 wf-section { 
        background-color: white !important; 
}

.w-container div { 
        background-color: white !important; 
}

.slider-contain-2 div { 
        background-color: white !important; 
}

.slick-test div { 
        background-color: white !important; 
}

.slider-id div { 
        background-color: white !important; 
}

.slick-track div { 
        background-color: white !important; 
}


.slick-list div { 
        background-color: white !important; 
}

.item w-dyn-item slick-slide slick-cloned div { 
        background-color: white !important; 
}

</style>

Website link: https://anastasiastallcop-09463966869e63530c18a.webflow.io/case-study-template-copy-2

Upvotes: 1

Views: 169

Answers (1)

Anastasia Stallcop
Anastasia Stallcop

Reputation: 21

I figured it out, I set my "list" container from slider to 940px (width of my table/slider). Because I had to set my wrapper (parent container) to 1480 in order to make my mobile overflow-scroll work for my table "list" inherited the width creating the extra space.

Upvotes: 1

Related Questions