Getting rid of the gray outline and make the product slider dots instead of numbers on product page?

[perfumecartel]

I have dawn theme

[Liquid_xPert_SJ]

@perfumecartel

please share a screenshot.

[perfumecartel]

Those numbers make it into dots and I want the barely visible gray box of the photo gone

[Liquid_xPert_SJ]

@perfumecartel

please add below css code into your theme file called base.css instructions below

Online Store > Edit code > Theme Files > Assets > base.css file

@media only screen and (max-width: 749px) {

.product__media-wrapper .slider-button {
	visibility: hidden !important;
}
.product__media-wrapper .slider-counter--current, 
.product__media-wrapper .slider-counter--total {
	background-color: #000;
	width: 10px;
	height: 10px;
	font-size: 0px;
	border-radius: 50%;
	margin: 0 2px;
cursor: pointer;
}

Hit Save

Thanks

[perfumecartel]

It´s great thanks, but how can I make it so the dot becomes reactive to the sliding?

like when you slide the picture that you´re seeing is the one that the dot has the color, thanks in advance