Why do my Next and Previous Buttons look odd on IOS?

Question

I'm currently redesigning my website and for this, I have created a carrousel of images and for this, I have used next and previous buttons. On Windows and Andriod they look normal (first image below) but on IOS they become all squished and look a bit weird. Is there anything I can do to fix this?

Also sometimes when I am testing out the buttons and I press the previous button it takes the user to the bottom of the page... Is there anything I can do to fix this as well? If you want to have a look for yourself a URL for one of the pages is https://www.fredsfashionboutique.com/valentino-moon-dust-t-shirt.html

Below is the JS code that I have used for the Carousel which I got off W3schools. I don't know how to code in JS which is the reason I got it off W3Schools so have tried my best to work with it - https://www.w3schools.com/howto/howto_js_slideshow.asp

 <button class="next" onclick="plusDivs(-1)">&#10094;</button> <button class="previous" onclick="plusDivs(1)">&#10095;</button> </div> <script> var slideIndex = 1; showDivs(slideIndex); function plusDivs(n) { showDivs(slideIndex += n); } function showDivs(n) { var i; var x = document.getElementsByClassName("mySlides"); if (n > x.length) {slideIndex = 1} if (n < 1) {slideIndex = x.length} for (i = 0; i < x.length; i++) { x[i].style.display = "none"; } x[slideIndex-1].style.display = "block"; } </script> </div>

Here is the CSS code that I used for the previous and next button

 .next{ background-color: lightgray; color: black; border-radius: 50%; font-size: 20px; }.previous{ background-color: lightgray; color: black; border-radius: 50%; font-size: 20px; }

This is also a screen recording of the previous button taking the user to the bottom of the page https://vimeo.com/user24572931/review/441815395/0a41442177

Any help would be much appreciated! Freddie

Answer 1

You should give it a width and height.

width: 30px;
height: 30px;

Answer 2

So its me again (Same as other answer) and I made some changes to your html and css so now its more "future proof" and simple

HTML:

          <button class="next btn" onclick="plusDivs(-1)"></button>
            <button class="previous btn" onclick="plusDivs(1)"></button>

            
          </div>
          
          <script>
          var slideIndex = 1;
          showDivs(slideIndex);
          
          function plusDivs(n) {
            showDivs(slideIndex += n);
          }
          
          function showDivs(n) {
            var i;
            var x = document.getElementsByClassName("mySlides");
            if (n > x.length) {slideIndex = 1}
            if (n < 1) {slideIndex = x.length}
            for (i = 0; i < x.length; i++) {
              x[i].style.display = "none";  
            }
            x[slideIndex-1].style.display = "block";  
          }
          </script>
    </div>

CSS:

.btn{
  background-color: lightgray;
  color: black;
  border-radius: 50%;
  font-size: 20px;
  width: 30px;
  height: 30px;
}

.next:after {
  content: "❮";
}

.previous:after {
  content: "❯";
}