Saya menambah butang tetapi atas sebab tertentu pertanyaan media tidak berfungsi dengannya

Question

Atas sebab tertentu pertanyaan media tidak berfungsi, ia berfungsi dengan baik untuk mana-mana kelas lain, saya hanya mempunyai masalah dengan kelas ini

Saya cuba, cuma keluarkan skrin dsb. Tiada satu pun yang berfungsi

const showImageButton = document.getElementById("show-image-button");
const myImage = document.getElementById("my-image");
showImageButton.addEventListener("click", () => {
  myImage.hidden = !myImage.hidden;
});

button2,
input[type=submit] {
  cursor: pointer;
}

button2,
input,
textarea {
  -webkit-appearance: none;
  -moz-appearance: none;
}

button2 {
  color: currentColor;
  overflow: visible;
  margin: 0
}

button2 {
  border-style: outset;
  line-height: 1.6;
  margin: 0 0 0px;
  text-align: center;
  line-height: 60px;
  max-width: 300px;
  border-radius: 10px;
  display: inline-block;
  text-align: center;
  text-decoration: none;
  position: relative;
  font-weight: 300;
  font-size: .85em;
  width: 100%;
}

So i want to make it to be width 100% on mobile @media only screen {
  .button2 {
    width: 100%;
  }
}

<button2 id="show-image-button">Méret Táblázat</button2>
<img id="my-image" src="https://cdn.shopify.com/s/files/1/2999/5106/files/True-to-Sole-nike-sneaker-sizechart_760x760.jpg?v=1611582903" hidden>

Answer 1

.button2 - Mempunyai titik bermakna anda sedang mencari elemen dengan butang kelas2. Tetapi dalam struktur HTML anda, saya tidak nampak kelas dengan nama itu.

Cuba kod di bawah, ini akan menemui elemen dengan id show-image-button

@media only screen {
  #show-image-button {
    width: 100%;
  }
}