J'ai ajouté un bouton mais pour une raison quelconque, les requêtes multimédias ne fonctionnent pas avec celui-ci

Question

Pour une raison quelconque, la requête multimédia ne fonctionne pas, elle fonctionne bien pour n'importe quelle autre classe, je n'ai un problème qu'avec cette classe

J'ai essayé, j'ai seulement retiré l'écran, etc. Aucun d'entre eux ne fonctionne

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 - Avoir un point signifie que vous recherchez un élément avec la classe bouton2. Mais dans votre structure HTML, je ne vois pas de classe portant ce nom.

Essayez le code ci-dessous, cela trouvera l'élément avec l'identifiant show-image-button

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