Dawn theme- how do I remove slideshow counter on mobile ONLY?

Solved

Dawn theme- how do I remove slideshow counter on mobile ONLY?

Sato71
Tourist
18 0 3

Hi, I am trying to remove the slideshow controls/counter for mobile ONLY, not for desktop (dawn theme). Is this possible? 

Accepted Solution (1)

NomtechSolution
Astronaut
1245 113 154

This is an accepted solution.

Yes, it is possible to remove the slideshow controls/counter for mobile devices only in the Dawn theme. You can achieve this by using CSS media queries to selectively hide the controls and counter on mobile devices. Here's an example of how you can do it:

  1. Access the theme editor: Go to your Shopify admin dashboard and navigate to "Online Store" -> "Themes". Find the Dawn theme and click on the "Actions" dropdown, then select "Edit code".

  2. Locate the slideshow code: In the theme editor, search for the code that generates the slideshow. This code is usually found within a section or template file and may have CSS classes or IDs associated with it.

  3. Add custom CSS: Within the slideshow code, you'll need to add custom CSS to hide the controls and counter on mobile devices. Insert the following CSS code:

 

 

@media only screen and (max-width: 767px) {
  .slideshow-controls,
  .slideshow-counter {
    display: none;
  }
}

 

 

  • In this example, the CSS code uses a media query to target mobile devices with a maximum width of 767 pixels. It selects the slideshow controls and counter elements and sets their display property to "none" to hide them on mobile devices.

View solution in original post

Replies 5 (5)

Made4uo-Ribe
Shopify Partner
8813 2109 2587

Would you mind to share your URL store with password if have? 

Thanks!

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.
Need THEME UPDATES but has custom codes? No worries, contact us for affordable price.

NomtechSolution
Astronaut
1245 113 154

This is an accepted solution.

Yes, it is possible to remove the slideshow controls/counter for mobile devices only in the Dawn theme. You can achieve this by using CSS media queries to selectively hide the controls and counter on mobile devices. Here's an example of how you can do it:

  1. Access the theme editor: Go to your Shopify admin dashboard and navigate to "Online Store" -> "Themes". Find the Dawn theme and click on the "Actions" dropdown, then select "Edit code".

  2. Locate the slideshow code: In the theme editor, search for the code that generates the slideshow. This code is usually found within a section or template file and may have CSS classes or IDs associated with it.

  3. Add custom CSS: Within the slideshow code, you'll need to add custom CSS to hide the controls and counter on mobile devices. Insert the following CSS code:

 

 

@media only screen and (max-width: 767px) {
  .slideshow-controls,
  .slideshow-counter {
    display: none;
  }
}

 

 

  • In this example, the CSS code uses a media query to target mobile devices with a maximum width of 767 pixels. It selects the slideshow controls and counter elements and sets their display property to "none" to hide them on mobile devices.
Sato71
Tourist
18 0 3

That worked perfectly, thanks so much!

massmonster
Shopify Partner
25 0 5

where can i find the code??

 

R2D21
Tourist
22 0 0

still having issues with this on dawn13, in the shopify editor I can simulate mobile view and it seems to work but on an actual android phone it doesn't seem to work the controls still show