スマホでサイトを表示する際、ボタンを横並びから縦並びに変えたい

JavaScriptで簡単なクイズゲームを作り、GITHUBから公開しました。
PCでは問題なく起動するのですが、スマホのように画面が縦長になると、本来横並びに設定している選択肢ボタンの中の文字がみづらくなるので、＠media(max-width:670px)(※Progate上級コースのスマホ版のwidthを参照)の時に縦並びになるよう設定しましたが反映されません。

もともとスタイルシートを外部サイトから引用し、その後に自作のCSSファイルで書き加えたせいなのか、他に理由があるのか分かりません。どのようにすれば、ボタンを縦並びに変えることができるでしょうか。

追記：縦方向に改変することはできました。　あとは、ボタンを中央揃え、もしくは画面いっぱいに横に広げるといったCSSを加えたいです。

HTML
1<!doctype html>
2<html class="no-js" lang="">
3
4<head>
5  <meta charset="utf-8">
6  <title>ポケモンクイズ</title>
7  <meta name="description" content="">
8  <meta name="viewport" content="width=device-width, initial-scale=1">
9
10  <meta property="og:title" content="">
11  <meta property="og:type" content="">
12  <meta property="og:url" content="">
13  <meta property="og:image" content="">
14
15  <link rel="apple-touch-icon" href="icon.png">
16  <!-- Place favicon.ico in the root directory -->
17
18<!-- CSS only -->
19<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
20<link rel="stylesheet" href="style.css">
21
22  <meta name="theme-color" content="#fafafa">
23</head>
24
25<body>
26  <div class="container">
27  
28    <div class="jumbotron mt-5">
29      <div class="d-flex justify-content-center">
30        <div id="js-question" class="alert alert-primary" role="alert">
31          A simple primary alert—check it out!
32        </div>
33      </div>
34      
35      <div id="js-items" class="d-flex justify-content-center">
36        <div class="m-2">
37          <button type="button" id="js-btn-1" class="btn btn-primary">Primary</button>
38        </div>
39        <div class="m-2">
40          <button type="button" id="js-btn-2" class="btn btn-primary">Primary</button>
41        </div>
42        <div class="m-2">
43          <button type="button" id="js-btn-3" class="btn btn-primary">Primary</button>
44        </div>
45        <div class="m-2">
46          <button type="button" id="js-btn-4" class="btn btn-primary">Primary</button>
47        </div>
48      </div>
49    </div>
50  </div>
51  
52<script src="app.js"></script>
53</body>
54
55</html>

CSS
1@media(max-width:1000px) {
2  #js-items {
3    flex-direction:column;
4    }
5  .m-2 button {
6    width: 100%
7    margin: 0 auto;
8  }
9}

JavaScript
1const quiz = [
2  {
3    question: "ホウエン地方で最初に手に入れられないポケモンはどれ？",
4    answers: [
5      "キモリ",
6      "ピカチュウ",
7      "アチャモ",
8      "ミズゴロウ"
9    ],
10    correct: "ピカチュウ"
11  }, {
12    question: "シンオウ地方のポケモン博士は誰？",
13    answers: [
14      "オダマキ博士",
15      "オーキド博士",
16      "ナナカマド博士",
17      "ウツギ博士"
18    ],
19    correct: "ナナカマド博士"
20  }, {
21    question: "ポケモン全国図鑑のNo.491のポケモンはどれ？",
22    answers: [
23      "レジギガス",
24      "ダークライ",
25      "シェイミ",
26      "アルセウス"
27    ],
28    correct: "ダークライ"
29  }, {
30    question: "ホウエン地方チャンピオン戦VSダイゴの１匹目のポケモンはどれ？",
31    answers: [
32    "アーマルド",
33    "メタグロス",
34    "ボスゴドラ",
35    "エアームド"
36  ],
37    correct: "エアームド"
38  },{
39    question: "シンオウ地方のバトルタワーのタワータイクーンは誰？",
40    answers: [
41    "ジンダイ",
42    "ダツラ",
43    "クロツグ",
44    "リラ"
45  ],
46    correct: "クロツグ"
47  }
48];
49
50const quizLength = quiz.length; 
51let quizIndex = 0;
52let score = 0;
53
54const $button = document .getElementsByTagName("button")
55const buttonLength = $button.length;
56
57//クイズの問題文、選択肢を定義
58const setupQuiz = () => {
59  document.getElementById("js-question").textContent=quiz[quizIndex].question;
60  let buttonIndex = 0;
61  while(buttonIndex < buttonLength){
62    $button[buttonIndex].textContent = quiz[quizIndex].answers[buttonIndex];
63    buttonIndex++;
64  }
65}
66setupQuiz();
67//クイズの正誤の処理
68const clickHandler = (e) => {
69  if (quiz[quizIndex].correct === e.target.textContent){
70    window.alert("正解！");
71    score++;
72  }else{
73    window.alert(`不正解！正解は、「${quiz[quizIndex].correct}」です！`);
74  }
75
76  quizIndex++;
77
78  if(quizIndex < quizLength){
79    //問題数がまだあればこちらを実行
80    setupQuiz(); 
81    }else if(score === 5){
82      //全問正解したらこちらを実行
83      window.alert(`終了！Congratulations！全問正解です！`);
84    }else if(score === 0){
85      //全問不正解したらこちらを実行
86      window.alert(`終了！残念！全問不正解です！`);
87  }else{
88    //問題数がもうなければこちらを実行
89    window.alert(`終了！あなたの正解数は` + score + `/` + quizLength + `です！`);
90  }
91
92};
93
94//ボタンをクリックしたら正誤判定
95let handlerIndex = 0;
96while (handlerIndex < buttonLength) {
97  $button[handlerIndex].addEventListener("click",(e)=>{
98    clickHandler(e);
99  });
100  handlerIndex++
101};
102

リンク内容

m.ts10806

2021/01/16 08:29

> ＠media(max-width:670px)の時に縦並びになるよう設定しましたが反映されません。この「670」という数値は何を根拠に出てきているのでしょうか。

tora822

2021/01/16 08:30

Progate上級コースで使用したスマホ版のwidthをそのまま流用しました。

m.ts10806

2021/01/16 08:32

当該内容追記してください。

退会済みユーザー

2021/01/16 08:39

リンク内容をChromeDevToolのモバイルモードで確認しましたが、おそらくtora822さんの意図通りに動いています。確認する環境の問題だったりしないでしょうか？ width:671以上の時は回答ボタンが横並びになる事 → OK width:670以下の時は回答ボタンが縦並びになる事 → OK

tora822

2021/01/16 08:42

追記した通り、縦方向は確認できました。サイトアップロード後に追加したCSSなので、反映が遅れたのだと思われます。加えて、ボタンの位置をcenter、もしくはwidth: 100%;(画面いっぱい)にしたいのですが、このコードでそれは可能でしょうか。修正、加筆は必要でしょうか。

m.ts10806

2021/01/16 08:47

回答したのに要件が変わってしまった。さて、どうしようか。

m.ts10806

2021/01/16 08:48

自身で回答して自己解決しておいてください。

tora822

2021/01/16 08:49

分かりました。ありがとうございました。

退会済みユーザー

2021/01/16 08:51 編集

何というか、まずは【現状を把握して、修正して、それを確認する】ってのをやってみましょ？それで出来なかったら、コードと現象を書くなどした方が良いと思います。幸い、どこが分からないのか分からないって状態でもなさそうに思いますので。ちなみに、リンク内容をDevToolでCSSを操作した所、ボタンを横幅いっぱいにというのは出来たので、『可能』です。

tora822

2021/01/16 08:51

以後そのようにいたします。ありがとうございます。