无法通过W3schools.com的移动浏览器自动幻灯片显示更改图像大小

Question

To Whom it May Concern:

I used code from W3schools.com's tutorial on creating an automatic image slideshow. The slideshow works great on desktop dimensions, however, when changing to mobile screen dimensions, I am unable to shrink the slideshow dimensions accordingly.

I am able to do so with all other images, as I am competent with HTML/CSS, but this has me stumped. Not sure if it's the 'link rel' relating to W3schools, the javascript, or something else I am missing. Thanks for any and all help. The code is as follows:

HTML:

<div class="w3-content w3-section">
<img class="mySlides" src="slider_3.png">
<img class="mySlides" src="slider_2.png">
<img class="mySlides" src="slider_1.png">
<img class="mySlides" src="slider_4.png">
<img class="mySlides" src="slider_5.png">

CSS:

.mySlides {
  display: none;
  width: 960px;
  height: 350px;
}

/* For mobile phones: */
@media screen and (min-width: 300px) and (max-width: 900px) {

.mySlides {
  display: none;
  width: 100%;
  height: auto;
}

and the Java:

    var myIndex = 0;
carousel();

function carousel() {
  var i;
  var x = document.getElementsByClassName("mySlides");
  for (i = 0; i < x.length; i++) {
     x[i].style.display = "none";
}
myIndex++;
  if (myIndex > x.length) {myIndex = 1}
  x[myIndex-1].style.display = "block";
  setTimeout(carousel, 7000); // Change image every 7 seconds
}

Answer 1

A christmas miracle happened. Now it is working!