レシポンシブデザインで画像の位置を変えてみたい。

レシポンシブデザインで、画像の位置を変えてみたい。

スマホ用とＰＣ用と画像の位置を変えてみたいと思ったのですが、一切変わってくれません。検索してみても詳しい書き方がわからず、どこが間違っているのか不明です…。
どうぞ、宜しくお願い致します。

###　該当のソースコード

HTML
1<!DOCTYPE>
2 <html>
3  <head>
4    <title>GIFT</title>
5    <meta chavimrset="UTF-8">
6    <script src="jquery-3.5.1.min.js"></script>
7    <link rel="stylesheet" href="nayami.css">
8    <meta name=”viewport” content=”width=device-width,initial-scale=1.0″>
9  </head>
10  <body>
11    <div class="a b c fade4 fade5 fade6 fade7 fade8 fade9">
12      <img src="top2.jpg">
13      <p>GIFT</p>
14      <p2 style="display: none">いつか渡す<br>贈り物のために</p2>
15      <p3 style="display: none">For a gift to give someday</p3>
16        <p4>Flower arrangement</p4>
17        <p5>GIFTの誇るフラワーデザイナーが、クライアン<br>トのご要望に応じたデザインをご提案致します。</p5>
18        <p6>Gardening</p6>
19        <p7>個人宅の造園、社内緑化、ガーデニングプラ<br>ンに関するご相談を承っております。</p7>
20        <p8>surprise</p8>
21        <p9>ご自宅の装花など、GIFT独自のサプライズ企画も行っております。</p9></div>
22    <br><br><br><br><br>
23  <section>
24    <div class="fade">Message from us</div><br><br>
25    <div class="fade2">GIFTは花を通じて,人との優しい繋がりを生み出すお手伝いをします。<br><br>その一助のなるべく、お客様の理想とするフラワーアレンジ、装花、造園,サプライズ企画など幅広くご提案を致します。<br></div><br><br><br><br>
26    <div class="fade3">service</div>
27
28      →この画像の位置をスマホ用のものに変えてみたい <img class="img2" src="arrang.jpg">
29
30       <img class="img3" src="zouen.jpg">
31       <img class="img4" src="pack.jpg">
32    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
33    <br><br><br><br><br>
34  </section>
35  <script src="na.js"></script>
36  </body>
37</html>
38

css←スマホ用に書いたレシポンシブデザイン適用のコード
1@media screen and (max-width:800px){
2      .img2{
3        position: absolute;
4        top: 500px;
5  }
6}
7
8
9
10
11.img2 {←位置を変えたいのはこの写真。
12  position: absolute;
13  top: 1110px;
14  left: 30px;
15}
16
17
18
19
20.img3{
21  position: absolute;
22  top:1110px;
23  left: 450px;
24}
25
26.img4{
27  display: flex;
28  position: absolute;
29  top: 1110px;
30  left: 870px;
31}
32
33body{
34  margin-top: 0;
35  margin-left: 0;
36  margin-right: 0;
37  margin-bottom: 0;
38}
39
40.a{
41  position: relative;
42}
43
44.a p{
45  position: absolute;
46  top: 0;
47  left: 45px;
48  font-size: 30px;
49  color: #6eba44;
50  font-family: serif;
51}
52
53
54
55.b p2{
56  position: absolute;
57  overflow: hidden;
58  font-family: serif;
59  font-size: 70px;
60  color: #f9f0e2;
61  width: 490px;
62  border-bottom: solid 1px;
63  animation-name: my-fade-in;
64  animation: my-fade-in 1.2s ease forwards;
65  top: 150;
66  left: 40;
67  margin: 0;
68  padding: 0;
69}
70
71
72
73@keyframes my-fade-in {
74  0% {
75     opacity: 0;
76     transform: translatex(-500px);
77  }
78  100% {
79     opacity: 1;
80     transform: translatey(0px);
81   }
82}
83
84.c p3{
85  position: absolute;
86  color: #f9f0e2;
87  top: 400px;
88  left: 43px;
89  margin:0;
90  padding:0;
91  font-size: 26px;
92  font-family: serif;
93  animation-name: my-fade-in2;
94  animation-duration: 1.2s;
95}
96
97@keyframes my-fade-in2 {
98   0% {
99      opacity: 0;
100      transform: translateY(-35px);
101   }
102   100% {
103      opacity: 1;
104      transform: translatey(0px);
105   }
106}
107
108
109
110
111/*スクロールフェードインアニメーションの指定*/
112.fade{opacity: 0;}/*メッセージ*/
113.fadeInDown{
114   text-align: center;
115    animation-name: fadeInDown;
116    animation-duration: 1s;
117    animation-fill-mode: forwards;
118    font-weight: bold;
119    font-size: 35px;
120    font-family: serif;
121    top: 1820px;
122}
123
124@keyframes fadeInDown {
125    0% {
126        opacity: 0;
127    }
128    100% {
129    opacity: 1;
130    transform: translatey(-50px);
131    }
132}
133
134
135.fade2{opacity: 0;}
136.fadeInDown2{
137    text-align: center;
138    animation-name: fadeInDown2;
139    animation-duration: 1s;
140    animation-fill-mode: forwards;
141    font-size: 18px;
142    font-family: serif;
143}
144
145@keyframes fadeInDown2 {
146    0% {
147        opacity: 0;
148    }
149    100% {
150    opacity: 1;
151    transform: translatey(-50px);
152    }
153}
154
155.fade3{opacity: 0;}
156.fadeInDown3{
157    text-align: center;
158    animation-name: fadeInDown3;
159    animation-duration: 1s;
160    animation-fill-mode: forwards;
161    font-weight: bolder;
162    font-size: 42px;
163    font-family: serif;
164}
165
166@keyframes fadeInDown3 {
167    0% {
168        opacity: 0;
169    }
170    100% {
171    opacity: 1;
172    transform: translatey(-50px);
173    }
174}
175
176
177
178
179
180.fade4 p4{opacity: 0;}/*Flower arrangement*/
181.fadeInDown4{
182    animation-name: fadeInDown4;
183    animation-duration: 1.3s;
184    animation-fill-mode: forwards;
185    font-weight: bolder;
186    font-size: 34px;
187    font-family: serif;
188    position: absolute;
189    top: 1420px;
190    left: 2.5%;
191}
192
193@keyframes fadeInDown4 {
194    0% {
195        opacity: 0;
196    }
197    100% {
198    opacity: 1;
199    transform: translatey(-50px);
200    }
201}
202
203.fade5 p5{opacity: 0;}/*GIFTの誇るフラワーデザイナーが、クライアントのご要望に応じ*/
204.fadeInDown5{
205    animation-name: fadeInDown5;
206    animation-duration: 1.3s;
207    animation-fill-mode: forwards;
208    font-size: 18px;
209    font-family: serif;
210    position: absolute;
211    top: 1500px;
212    left: 28px;
213}
214
215@keyframes fadeInDown5 {
216    0% {
217        opacity: 0;
218    }
219    100% {
220    opacity: 1;
221    transform: translatey(-50px);
222    }
223}
224
225.fade6 p6{opacity: 0;}
226.fadeInDown6{
227    animation-name: fadeInDown6;
228    animation-duration: 1s;
229    animation-fill-mode: forwards;
230    font-weight: bolder;
231    font-size: 34px;
232    font-family: serif;
233    position: absolute;
234    top: 1420px;
235    left: 450px;
236}
237
238@keyframes fadeInDown6 {
239    0% {
240        opacity: 0;
241    }
242    100% {
243    opacity: 1;
244    transform: translatey(-50px);
245    }
246}
247
248
249.fade7 p7{opacity: 0;}/*個人宅、社内緑化*/
250.fadeInDown7{
251    animation-name: fadeInDown7;
252    animation-duration: 1s;
253    animation-fill-mode: forwards;
254    font-size: 18px;
255    font-family: serif;
256    position: absolute;
257    top: 1500px;
258    left: 450px;
259}
260
261@keyframes fadeInDown7 {
262    0% {
263        opacity: 0;
264    }
265    100% {
266    opacity: 1;
267    transform: translatey(-50px);
268    }
269}
270
271
272.fade8 p8{opacity: 0;}
273.fadeInDown8{
274    animation-name: fadeInDown8;
275    animation-duration: 1s;
276    animation-fill-mode: forwards;
277    font-weight: bolder;
278    font-size: 34px;
279    font-family: serif;
280    position: absolute;
281    top: 1420px;
282    left: 870px;
283}
284
285@keyframes fadeInDown8 {
286    0% {
287        opacity: 0;
288    }
289    100% {
290    opacity: 1;
291    transform: translatey(-50px);
292    }
293}
294
295.fade9 p9{opacity: 0;}
296.fadeInDown9{
297    animation-name: fadeInDown9;
298    animation-duration: 1s;
299    animation-fill-mode: forwards;
300    font-size: 18px;
301    font-family: serif;
302    position: absolute;
303    top: 1500px;
304    left:870px;
305}
306
307@keyframes fadeInDown9 {
308    0% {
309        opacity: 0;
310    }
311    100% {
312    opacity: 1;
313    transform: translatey(-50px);
314    }
315}
316

試したこと

上記に記述したソースコードにあるように、img2のclass名を振り分けてそれぞれ別の処理になるようにしたのですが、スマホ用の処理には変わりませんでした。
検索しても詳しい書き方が見つからず、どうかご教授願えませんでしょうか？

@media screen and (max-width:800px){
.img2{
position: absolute;
top: 500px;
}
}

.img2 {
position: absolute;
top: 1110px;
left: 30px;
}

補足情報（FW/ツールのバージョンなど）

ブラウザはchromeです。

行動規範の内容に同意します

回答2件

ベストアンサー

メディアクエリは、CSSの最後に書いてください。
そうしないと、せっかくメディアクエリを書いてもその後に出てくるCSSで上書きされてしまいます。
以下の順番で書いてください。

CSS
1.img2 {
2position: absolute;
3top: 1110px;
4left: 30px;
5}
6
7@media screen and (max-width:800px){
8.img2{
9position: absolute;
10top: 500px;
11}
12}