Shopify themes, liquid, logos, and UX
Hi, I am trying to remove the slideshow controls/counter for mobile ONLY, not for desktop (dawn theme). Is this possible?
Solved! Go to the solution
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:
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".
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.
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;
}
}
Would you mind to share your URL store with password if have?
Thanks!
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:
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".
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.
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;
}
}
That worked perfectly, thanks so much!
where can i find the code??
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
We recently spoke with Zopi developers @Zopi about how dropshipping businesses can enha...
By JasonH Oct 23, 2024A big shout out to all of the merchants who participated in our AMA with 2H Media: Holi...
By Jacqui Oct 21, 2024We want to take a moment to celebrate the incredible ways you all engage with the Shopi...
By JasonH Oct 15, 2024