Remove column numbers on MOBILE

Retired Boards Appdev Functions
,

Topic summary

Goal: hide the numeric column/slide counter on mobile while keeping desktop unchanged.

Context: The store URL and password were shared for review. Screenshots illustrate the counter/controls before and after changes.

Proposed solutions:

  • Edit component-slider.css to hide slider buttons (selector: .slider-buttons). This removes visible slider controls; effect shown in an image, but may not specifically target the counter.
  • Edit base.css to hide the counter globally (selector: .slider-counter with !important). This removes the counter on all devices, not just mobile.
  • Add a mobile-only CSS rule via a media query (max-width: 767px) targeting .slider-counter { display: none !important; } placed before in theme.liquid. This confines the change to mobile and aligns with the request.

Status: No confirmation from the original poster that the issue is resolved. The most recent and most targeted approach is the mobile-only media query hiding .slider-counter.

Summarized with AI on December 24. AI used: gpt-5.
2

Hello @jakethagun
Go to online store ---------> themes --------------> actions ------> edit code------->assets-----> component-slider.css
add this code at the end of the file

.slider-buttons {
display: none;
}

and the result will be

20.png
20.png320×832 128 KB

If this was helpful, hit the like button and mark the job as completed.
Thanks

1 Like