ボタンを追加しましたが、何らかの理由でメディア クエリが機能しません

Question

何らかの理由でメディア クエリが機能しませんが、他のクラスでは正常に機能しますが、このクラスでのみ問題が発生します

スクリーンなどを外すだけで試してみました。どれも有効ではありません

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

ボタン2、
input[type=submit] {
  カーソル: ポインタ;
}

ボタン2、
入力、
テキストエリア {
  -webkit の外観: なし。
  -moz-外観: なし。
}

ボタン2 {
  色: 現在の色;
  オーバーフロー: 表示;
  マージン: 0
}

ボタン2 {
  ボーダースタイル: 開始;
  行の高さ: 1.6;
  マージン: 0 0 0px;
  テキスト整列: 中央;
  行の高さ: 60px;
  最大幅: 300ピクセル;
  境界半径: 10px;
  表示: インラインブロック;
  テキスト整列: 中央;
  テキスト装飾: なし。
  位置: 相対的;
  フォントの太さ: 300;
  フォントサイズ: .85em;
  幅: 100%;
}

だから、モバイル@mediaのみの画面で幅100％にしたいです{
  .button2 {
    幅: 100%;
  }
}

<button2 id="show-image-button">メレット・タブラザット</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" 非表示>

Answer 1

.button2 - ドットがあるのは、クラス button2 の要素を探していることを意味します。しかし、HTML 構造にはその名前のクラスが見つかりません。

次のコードを試してください。これにより、ID show-image-button

の要素が検索されます。

@メディアのみの画面 {
  #画像表示ボタン {
    幅: 100%;
  }
}