While attempting to create a slider with dots, I encountered an issue where the dots appeared as ellipses instead of circles, despite setting the width and height to be the same. For instance, I specified width: 12px; height: 12px; but it resulted in a shape of 12x16px. However, the active dot displayed correctly. Below is my CSS:
.slider .slick-dots li.slick-active button{
background-color: rgb(151, 146, 146);
width: 12px;
height: 12px;
border: none;
}
.slider .slick-dots button{
font-size: 0;
width: 12px;
height: 12px;
background-color: #fff;
border-radius: 50%;
border: 2px solid rgb(151, 146, 146);
}