お問い合わせフォームのレスポンシブデザインについて

お問い合わせフォームの練習をしています。

記載間違いしておりました。
編集致します。すみません。

正しくは
「１０９０px」以下の画面幅になると
ラベル文字が半分に左右で割れて
左に文字　真ん中にチェックボックス　右側に残りの割れた文字
と分裂してしまいます。

なので画面幅（今回であれば４８０px以下）になった時の
携帯デバイスでも表示が崩れないように
レスポンシブデザインをしようと思い
コーディングしてみましたが
なぜか＠media~
のスタイルをしていくと元々CSSで装飾していた部分が
全て無効になってしまいます。

一応（max-width: 480px）と指定しているのですが
原因はどうしてなのでしょうか？

また、max-width: 480pxの場合
縦書きに表示したいです。
なのでflex-wrap: wrap;としましたが
効きません。

[
「名前」「必須」
「input box」

の形にしたいです。

※１０９０px以上だと崩れることがなく
チェックボックスも
左にチェックボックス　右にラベル文字
と表示されます。

アドバイス宜しくお願い致します。

html
1<!DOCTYPE html>
2<html lang="ja">
3  <head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width,initial-scale=1">
6
7    <title>問い合わせ</title>
8    <link rel="stylesheet" type="text/css" href="css/.css" />
9
10    </head>
11
12    <body style="margin:0;">
13      <section id="contact_01">        
14        <form action="" method="POST">
15          
16          
17          <h2>お問い合わせフォーム内容</h2>
18          <div class="container">     
19            <div>
20              <label for="i_company" class="question">         
21                企業名</label>
22              </div>
23              <div>
24                <em>必須</em>
25              </div>
26              <div>							
27                <input id="i_company" type="text" name="company" required >
28              </div>											
29            </div>
30            
31            <div class="container">     
32              <div>					
33                <label for="i_name" class="question">          
34                  お名前</label>
35                </div>  
36                <div>						
37                  <em>必須</em>
38                </div> 
39                <div>						
40                  <input id="i_name" type="text" name="name" required>
41                </div>
42              </div>
43              
44              <div class="container"> 
45                <div>					
46                  <label for="i_mailadrees" class="question">          
47                    メールアドレス</label>			  
48                  </div>   
49                  <div>					
50                    <em>必須</em>
51                  </div> 
52                  <div>					
53                    <input id="i_mailadrees" type="text" name="mailadrees" required>
54                  </div>
55                </div>
56                
57                <div class="container"> 
58                  <div>					
59                    <label for="i_telnumber" class="question">          
60                      電話番号</label>
61                    </div>
62                    <div>					
63                      <em>必須</em>
64                    </div>
65                    <div>					
66                      <input id="i_telnumber" type="text" name="telnumber" required>
67                    </div>
68                  </div>
69                  
70                  <div class="container"> 
71                    <div>					
72                      <label>きっかけ<br><複数回答可></label>
73                    </div>
74                    <div>					
75                      <em>任意</em>
76                    </div>
77                    <div class=box_01>					
78                      <div>
79                        <input id="check01_01" type="checkbox">
80                        <label for="check01_01">SEO</label>
81                      </div>
82                      
83                      <div>
84                        <input id="check01_02" type="checkbox">
85                        <label for="check01_02">広告</label>
86                      </div>
87                      
88                      <div>
89                        <input id="check01_03" type="checkbox">
90                        <label for="check01_03">SNS</label>
91                      </div>
92                      
93                      <div>
94                        <input id="check01_04" type="checkbox">
95                        <label for="check01_04">DM</label>
96                      </div>
97                    </div>
98                    </div>
99
100                  
101                  <!-- 問い合わせ内容マスト -->
102                  <div class="container">                
103                    <div>
104                      <label>
105                        お問い合わせ内容
106                      </label>
107                    </div>
108                    <div>
109                      <em>必須</em>
110                    </div>
111                    <div>  
112                      <textarea required></textarea>
113                    </div> 
114                  </div>
115                  
116                  <p class="btn"><input type="submit" class="form_btn"value="送信内容を確認する"></p>
117                </form>
118              </section>
119                
120                
121                
122                
123              </body>
124
125

CSS
1#contact_01{
2	background-color: #fff;
3margin:0;
4}
5
6@media(max-width: 480px) {
7  #contact_01 {
8		margin-top: 60px;	
9		background-color: #fff;
10	}
11	}
12	
13.container{
14	border-top: 1px solid #ddd;
15  padding-top: 24px;
16  padding-bottom: 24px;
17  width: 100%;
18	display:flex;
19	align-items: center;
20	justify-content: center;
21	/* background-color: #fff; */
22
23}
24@media(max-width: 480px) {
25.container{
26　border-top: 1px solid #ddd;
27  padding-top: 20px;
28  padding-bottom: 20px;
29 flex-wrap: wrap;	
30}
31}
32
33.container label{
34	width: 100%;
35  max-width: 248px;
36  letter-spacing: 0.05em;
37  font-weight: bold;
38	font-size: 18px;
39}
40
41@media(max-width: 480px) {
42.container label{
43 max-width: inherit;
44 display: flex;
45 align-items: center;
46 font-size: 13px;	
47 letter-spacing: 0.05em;
48 font-weight: bold;
49 font-size: 24px;
50}
51}
52
53.container  .box_01 label{
54	
55	padding-left: 0px;
56	font-size: 20px;
57}
58@media(max-width: 480px) {
59.container  .box_01 label{
60	padding-left: 0px;
61	font-size: 20px;
62}
63}
64
65.container em{
66	border-radius: 6px;
67	margin-right: 8px;
68	margin-left: 40px;
69  padding-top: 8px;
70  padding-bottom: 8px;
71  width: 48px;
72  display: inline-block;
73  text-align: center;
74  background: #5bc8ac;
75  color: #fff;
76  font-size: 14px;
77}
78
79@media(max-width: 480px) {
80.container em{
81  border-radius: 4px;
82  padding-top: 4px;
83  padding-bottom: 4px;
84  width: 32px;
85  background: #5bc8ac;
86  color: #fff;
87  font-size: 10px;
88}
89}
90
91.container input{
92	border: 1px solid #ddd;
93  border-radius: 4px;
94  margin-left: 40px;
95  padding-left: 1em;
96	padding-right: 6em;
97	padding-top:30px;
98	padding-bottom: 30px;
99  height: 10px;
100  flex: 1;
101  width: 100%;
102  max-width: 410px;
103  background: #eaedf2;
104	font-size: 18px;
105
106}
107
108@media(max-width: 480px){
109.container input{
110	border: 1px solid #ddd;
111  margin-left: 0px;
112  height: 40px;
113  flex: inherit;
114  background: #eaedf2;
115	font-size: 18px;
116
117}
118}
119
120 .container input[type="checkbox"]{
121	 position: relative;
122	 top:6px;
123 }
124
125 @media(max-width: 480px){
126 .container input[type="checkbox"]{
127	 position: relative;
128	 top:5px;
129 }
130}
131
132
133
134
135 .container .box_01 input[type="checkbox"]{
136	 position: relative;
137	 top:6px;
138	 height: 30px;
139 }
140
141 @media(max-width: 480px){
142 .container .box_01 input[type="checkbox"]{
143	 position: relative;
144	 top:5px;
145	 height: 10px;
146 }
147}
148
149 .form_btn {
150  border-radius: 6px;
151  margin-top: 32px;
152  margin-left: auto;
153  margin-right: auto;
154  padding-top: 20px;
155  padding-bottom: 20px;
156  width: 280px;
157  display: block;
158  letter-spacing: 0.05em;
159  background: #5bc8ac;
160  color: #fff;
161  font-weight: bold;
162  font-size: 20px;
163}
164
165@media(max-width: 480px){
166 .form_btn {
167  margin-top: 25px;
168  padding-top: 8px;
169  padding-bottom: 8px;
170  width: 160px;
171  letter-spacing: 0.05em;
172  background: #5bc8ac;
173  color: #fff;
174  font-weight: bold;
175  font-size: 16px;
176}
177}
178
179.container textarea{
180		border: 1px solid #ddd;
181		border-radius: 6px;
182		margin-left: 40px;
183		padding-left: 1em;
184		padding-right: 6em;
185		height: 216px;
186		flex: 1;
187		width: 100%;
188		max-width: 410px;
189		background: #eaedf2;
190		font-size: 18px;
191	}
192
193@media(max-width: 480px){
194.container textarea{
195		border: 1px solid #ddd;
196		margin-left: 0px;
197		height: 200px;
198		flex: inherit;
199		background: #eaedf2;
200		font-size: 15px;
201	}
202}
203
204
205
206

gpsoft

2020/11/23 13:59

「チェックボックスの左にラベルが来てしまう」の間違いではないですか? それと、1090pxより大きいときは、再現しないのでしょうか?

gpsoft

2020/11/24 03:13

残念ながら、私の環境では再現しませんでした。私の環境では・ラベルが半分に別れたりしない・チェックボックスとラベルは上下に並ぶ(見た目上は、チェックボックスが右上で、ラベルが左下) ・1090pxあたりでも変化なしって感じです。ブラウザの「開発者ツール」という機能をご存知ですか? ブラウザによっては、開発ツールとかDevToolsとか、呼び方が違いますが、どんなブラウザにも似たような機能があると思います。この機能を使うと、HTMLの各要素にどんなスタイルが適用されているかを調べることができます。お試しください。