メディアクエリが機能しない

viewportを設定しているのですがメディアクエリが機能せず原因がわかりません。viewportを記載しているか、メディアクエリの記述が間違っているのかなどを調べましたが、それ以外の原因なのでしょうか。

<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>ご利用アンケート</title>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/style.css">
  </head>
  <body>
    <div class="container">
      <header>
        <div class="row">
            <div class="col-sm-6">
              <h1>ご利用アンケート</h1>
            </div>
            <div class="col-sm-6 align-right">
              <a href="/">HOMEへ戻る</a>
            </div>
        </div>
      </header>
    </div>

      <hr>

      <div class="container">
        <form action="http://book.h2o-space.com/html/form.php" mthod="post">
          <div class="col-sm-8 col-sm-offset-2">
            <p>
              この度は、本書をご利用頂きありがとうございます。恐れ入りますが、以下のフォームにご記入いただき、送信して頂けると幸いです。
            </p>
            <div class="form-group">
              <label for="name"><b>お名前
                <span class="red">必須</span></b></label>
              <input type="text" id="name" name="name" class="form-control" placeholder="例)山田　太郎">
            </div>
            <div class="form-group">
              <label for="job"><b>ご職業<span class="red">必須</span></b></label>
              <select id="job" name="job" class="form-control">
                <option value="">選択してください</option>
                <option value="会社員">会社員</option>
                <option value="フリーター">フリーター</option>
                <option value="学生">学生</option>
                <option value="自営業">自営業</option>
                <option value="その他">その他</option>
              </select>
            </div>
            <div class="form-group">
                <label><b>知りたい内容（複数回答可）<span class="green">任意</span></b></label>
                <div class="checkbox">
                    <label>
                      <input type="checkbox" name="q1" value="html">
                      HTML
                    </label>
                </div>
                <div class="checkbox">
                    <label>
                      <input type="checkbox" name="q1" value="css">
                      CSS
                    </label>
                </div>
                <div class="checkbox">
                    <label>
                      <input type="checkbox" name="q1" value="javascript">
                      JavaScript
                    </label>
                </div>
            </div>
            <div class="form-group">
                <label><b>理解度はいかがですか？</b></label>
                <div>
                  <label class="radio-inline">
                    <input type="radio" name="q2" value="1">理解できなかった
                  </label>
                  <label class="radio-inline">
                    <input type="radio" name="q2" value="2">大体理解できた
                  </label>
                  <label class="radio-inline">
                    <input type="radio" name="q2" value="3">理解できた
                  </label>
                  <label class="radio-inline">
                    <input type="radio" name="q2" value="4" checked>回答しない
                  </label>
                </div>
            </div>
            <div class="form-group">
                <label for="message"><b>ご意見</b></label>
                <textarea name="message" rows="10" class="form-control"></textarea>
            </div>
            <button type="submit" class="btn btn-default">送信する</button>
          </div>
        </form>
      </div>

      <hr>
    <div class="container">
      <footer>
        <p>&copy;matsumori</p>

      </footer>
    </div>
  </body>
</html>

css
1
2header{
3  margin-top: 30px;
4  color: #2e99a9;
5}
6
7body{
8    font-size: 14px;
9    line-height: 1.42857143;
10    color: #333;
11    background-color: #fff;
12}
13
14hr{
15  border-width: 3px;
16  border-color: #2e99a9;
17  border-top: 1px solid #eee;
18  margin-top: 20px;
19  margin-bottom: 20px;
20}
21
22h1{
23  font-size: 18px;
24  font-weight: bold;
25  margin: 0;
26  font-family: inherit;
27  line-height: 1.1;
28  color: inherit;
29}
30
31a{
32  color: #337ab7;
33  text-decoration: none;
34  background-color: transparent;
35}
36
37p{
38  margin: 0 0 10px;
39}
40
41label{
42  display: inline-block;
43  max-width: 100%;
44  margin-bottom: 5px;
45  padding: .2em .6em .3em;
46  font-size: 100%;
47  line-height: 1;
48  text-align: center;
49  white-space: nowrap;
50  vertical-align: baseline;
51  border-radius: .25em;
52}
53
54.col-sm-offset-2{
55  margin-left: 16.67%
56}
57
58.col-sm-8{
59  position: relative;
60  min-height: 1px;
61  padding-right: 15px;
62  padding-left: 15px;
63  width: 66.67%;
64}
65
66.align-right{
67  text-align: right;
68}
69
70.container{
71  padding-right: 80px;
72  padding-left: 80px;
73  margin-right: auto;
74  margin-left: auto;
75}
76
77.form-control{
78  display: block;
79  width: 100%;
80  height: 34px;
81  padding: 6px 12px;
82  font-size: 14px;
83  line-height: 1.42857143;
84  color: #555;
85  background-color: #fff;
86  background-image: noe;
87  border: 1px solid #ccc;
88  border-radius: 4px;
89}
90
91.form-group{
92  margin-bottom: 15px;
93}
94
95textarea{
96  font-family: inherit;
97  overflow: auto;
98  margin: 0;
99  font: inherit;
100}
101
102.red{
103  box-sizing: border-box;
104  margin-bottom: 15px;
105  color: rgb(51, 51, 51);
106  font-size: 14px;
107  display: inline-block;
108  max-width: 100%;
109  margin-bottom: 5px;
110  font-weight: 700;
111  display: inline;
112  padding: 0.2em 0.6em 0.3em;
113  font-size: 10.5px;
114  line-height: 1;
115  color: rgb(255, 255, 255);
116  text-align: center;
117  white-space: nowrap;
118  vertical-align: baseline;
119  border-radius: 0.25em;
120  background-color: rgb(217, 83, 79);
121}
122
123.green{
124  box-sizing: border-box;
125  margin-bottom: 15px;
126  color: rgb(51, 51, 51);
127  font-size: 14px;
128  display: inline-block;
129  max-width: 100%;
130  margin-bottom: 5px;
131  font-weight: 700;
132  display: inline;
133  padding: 0.2em 0.6em 0.3em;
134  font-size: 10.5px;
135  line-height: 1;
136  color: rgb(255, 255, 255);
137  text-align: center;
138  white-space: nowrap;
139  vertical-align: baseline;
140  border-radius: 0.25em;
141  background-color:#5cb85c;
142}
143
144button{
145    border-radius: 4px;
146    font-size: 14px;
147    background-image: linear-gradient(to bottom,#fff 0,#e0e0e0 100%);
148    box-sizing: border-box;
149  }
150
151}
152
153
154@media all and (min-width:770px) {
155  header{
156    margin-top: 1000px;
157    color: #2e99a9;
158  }
159}
160

m.ts10806

2019/07/29 02:25

text-alignだと変化が分かりづらいと思います。背景色とか文字サイズを指定して確認してみてください。

dit.

2019/07/29 07:33

他の所はちゃんと見てないですけどとりあえず<div class="container"の>がありません

nyaaa6

2019/07/31 05:57

<div class="container"の>が抜けていました。ご指摘ありがとうございます。一通り確認し、開発者ツールでエラーが表示されないですが、メディアクエリが機能していないようです。

回答1件

ベストアンサー

不要なブレースが入ってるからですよ。

button{
    border-radius: 4px;
    font-size: 14px;
    background-image: linear-gradient(to bottom,#fff 0,#e0e0e0 100%);
    box-sizing: border-box;
  }

}

これの最後の"}"はいらないはずです。

投稿2019/07/29 03:57