Need to remove grey background on slideshow buttons for desktop and mobile

Solved
fieldstudy
Tourist
5 0 3

Hello, I want to remove the grey background and pause button on my slideshow for both mobile and on desktop. They show up grey on the desktop version and opaque and quite large on the mobile version and get in the way of the pictures. I have the slideshow on auto rotate, so I don't need the pause button to show up either. I am using the debut theme. I've read through a lot of the forums and changed my code, but none seemed to work (I changed code back to original).

Thank you!

Screen Shot 2021-01-15 at 2.39.40 PM.pngIMG_EDA4C1DAA419-1.jpeg

neeravmakwana
Shopify Partner
164 29 32

Welcome to Shopify Community!

Adding this code to the bottom of your theme.scss.liquid file will remove all these controls completely, in case that is fine with you.

 

.slideshow__text-wrap.slideshow__text-wrap--mobile {
    display: none!important;
}

.index-section--slideshow .slideshow__controls {
    display: none!important;
}

 

0 Likes
KetanKumar
Shopify Partner
14546 1675 5226

@fieldstudy 

Welcome to the Shopify community!
and Thanks for your question.

Please share your site URL,
So I will check and provide a solution here.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
fieldstudy
Tourist
5 0 3
fieldstudy
Tourist
5 0 3

@neeravmakwana I added this code and it did not work. I pasted into my theme.scss code, saved, then cleared my browser cookies but still did not work. Here is where I pasted it:

Screen Shot 2021-01-16 at 8.09.26 AM.png

0 Likes
KetanKumar
Shopify Partner
14546 1675 5226

This is an accepted solution.

@fieldstudy 

Thanks for it 

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.css ->paste below code at the bottom of the file.

This code apply after 5-6 second

.slideshow__controls, .slideshow__text-wrap--mobile {display: none;}

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
fieldstudy
Tourist
5 0 3

@KetanKumar pasted into bottom of theme.css.liquid and that worked! Thank you!

fieldstudy
Tourist
5 0 3

@neeravmakwana see below, @KetanKumar helped me out. Thank you to you both!

KetanKumar
Shopify Partner
14546 1675 5226

@fieldstudy 

it's my pleasure to help you

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Threadfin
New Member
1 0 0

I'm trying to remove the play and pause button on the narrative theme video slideshow. This code works to do that but now the video doesn't auto play. Any suggestions?

0 Likes