How To Remove Slideshow Buttons On Mobile - Dawn Theme 9.0.0

Solved

How To Remove Slideshow Buttons On Mobile - Dawn Theme 9.0.0

SearchGhost1738
Excursionist
17 0 6

Hi there, 

 

I'm trying to remove the arrows and pause button from the slideshow on mobile only!

 

I know I have to edit the theme's code, but I don't know which part. I've tried a bunch of solutions from other posts, but none have worked. I just want tot remove the controls from the mobile view.

 

Thank you!

https://coolcookiesllc.myshopify.com/

IMG_5292F20B9DE3-1.jpeg

Accepted Solution (1)

codewiser
Shopify Partner
81 35 33

This is an accepted solution.

Hello SearchGhost1738!

 

Step 1: Go to Online Store -> Theme -> Edit code.

Step 2: Search file base.css

Step 3: Paste the below code at bottom of the file -> Save

 

@media only screen and (max-width: 749px) {
	.slider-mobile-gutter .slideshow__controls { display: none; }	
}

 

If your problem solved then Like & Accept this Solution.
For Designing, Development and custom changes hire us. Email us Or WhatsApp Or Skype.

View solution in original post

Replies 10 (10)

codewiser
Shopify Partner
81 35 33

This is an accepted solution.

Hello SearchGhost1738!

 

Step 1: Go to Online Store -> Theme -> Edit code.

Step 2: Search file base.css

Step 3: Paste the below code at bottom of the file -> Save

 

@media only screen and (max-width: 749px) {
	.slider-mobile-gutter .slideshow__controls { display: none; }	
}

 

If your problem solved then Like & Accept this Solution.
For Designing, Development and custom changes hire us. Email us Or WhatsApp Or Skype.
SearchGhost1738
Excursionist
17 0 6

Worked perfectly! Thank you

SearchGhost1738
Excursionist
17 0 6

Do you know how to remove the arrows and pause button from the desktop view? I'd like to just keep the dots.

ThanksScreenshot 2023-05-07 at 9.37.03 AM.png

codewiser
Shopify Partner
81 35 33

Hey @SearchGhost1738 ,

 

For keep dots but remove arrows and play/pause button from desktop,

Please follow below steps

Step 1: Go to Online Store -> Theme -> Edit code.

Step 2: Search file base.css

Step 3: Paste the below code at bottom of the file -> Save

@media only screen and (min-width: 750px) {
	.slider-mobile-gutter .slideshow__controls .slider-button{ display: none; }
}

 

If your problem solved then Like & Accept this Solution.
For Designing, Development and custom changes hire us. Email us Or WhatsApp Or Skype.
SearchGhost1738
Excursionist
17 0 6

That worked! Do you know how to remove the line at the bottom as well? Sorry for all the changes.

codewiser
Shopify Partner
81 35 33


Thanks @SearchGhost1738  for the Accepting solution and also for Like


For remove line at bottom, please add below code into base.css file

.slider-mobile-gutter .slideshow__controls{ border: none; }

 

If your problem solved then Like & Accept this Solution.
For Designing, Development and custom changes hire us. Email us Or WhatsApp Or Skype.
dbacorp257
Tourist
18 0 2

hi, my slideshow control settings are at the top of the page for some reason for both desktop and mobile.

 

1) how do I bring it back down? 

2) Instead of dots how do i change it to just 3 lines?

3) How do I make the control settings part of the image instead of having it at the bottom of the image?

 

Thank you.

codewiser
Shopify Partner
81 35 33

Hey @dbacorp257 

Can you share your store URL?

So we can go further it.

If your problem solved then Like & Accept this Solution.
For Designing, Development and custom changes hire us. Email us Or WhatsApp Or Skype.
dbacorp257
Tourist
18 0 2

My store is pass protected at the moment. I'm pretty good with editing code if i know what im looking for. The controls are simply on top of the slideshow as a opposed to the bottom where it typically would be

Izzac
Tourist
9 0 3

Still works with Dawn version 15.2.0