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

Store Design
, , , , ,
1

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

1 Like
2

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

Thanks!

3

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.
4

That worked perfectly, thanks so much!

5

where can i find the code??

6

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