How to remove mobile slider numbers and arrows in Dawn Theme?

[Ell_Soll]

Any way to remove the mobile slider numbers and arrows?

[Made4uo-Ribe]

Hi @Ell_Soll ,

Would you mind to share your URL store(with password)?

If not the right click inspect tool and choose the right selector.

Example.

.selector {

display: none;

}

I hope it help.

[Ell_Soll]

Hi

Ell Soll Fashion | Stylish Fashion

[NomtechSolution]

1. Identify the CSS selectors for the slider numbers and arrows. These selectors might vary depending on the specific slider implementation or theme you’re using. Common selectors for slider numbers are .slider-number or .slick-dots, and for slider arrows are .slider-arrow or .slick-arrow.

2. Add the following CSS properties to the selectors:

@media (max-width: 767px) {
  /* Hide slider numbers on mobile */
  .slider-number {
    display: none;
  }

  /* Hide slider arrows on mobile */
  .slider-arrow {
    display: none;
  }
}

[Ell_Soll]

Where I need to put this codes?

Which file?

[Made4uo-Ribe]

Hi,

Thank you for sharing your information. I understabnd that you want to remove the slide number and arrows. Just follow the instructions below.

1. From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
2. Find the theme that you want to edit and click on “Actions” and then “Edit code”.
3. In the “Assets” folder, click on “theme.scss.liquid” or “styles.scss.liquid” file, depending on which file your theme uses to store its CSS styles.
4. At the bottom of the file, add the following CSS code:
5. And Save.

@media screen and (max-width: 7490px){
.slider-buttons.no-js-hidden.medium-hide {
    display: none;
}
}

Result:

I hope it help.

[Ell_Soll]

I added the code to the bottom of base.css and it works.

Thank you very much!

[Made4uo-Ribe]

Good to hear that. Happy to help.