メディアクエリで画像サイズを変更したい

LPサイトを作成しています。
画面幅が７００px以上になると
flexを使用して
３つの画像を横に並べたいと思っています。

ただ、flexにして３つの画像がそのままでは大きすぎるので
小さくしたいのですが
最初に設定している８００pxが優先されて
変更することができません。

これは何が原因なのでしょうか？

７００px以上の画面幅で例えば
widthを２００pxにしたい場合は
どうすれば良いですか？

html
1          <div class="container">
2            <div>
3              <img>
4            </div>
5            <div>
6              <img>
7            </div>
8            <div>
9              <img>
10            </div>
11          </div>
12

css
1.container{
2  text-align: center;
3  margin:auto;
4}
5.container img{
6  width: 800px;
7  margin-bottom: 30px;
8}
9
10@media (min-width:700px){
11.container{
12  display:flex;
13  justify-content: center;
14}
15.container img{
16  width:200px;
17}
18
19}
20
21

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

回答1件

ベストアンサー

そもそも「width: 800px;」が効いてないように思います。
700px以上で200pxは効いてます。

ブラウザ幅700以上

ブラウザ幅700以下

原因は全角スペース

css
1.container[　]img{

「おかしいな」と思ったときは文法チェックを。

それなりのエディタ使ってれば全角スペースが分かりやすくハイライトされると思います。

投稿2020/12/04 22:48

編集2020/12/04 23:13

m.ts10806

総合スコア80875

chocon

2020/12/04 23:09

ご指摘有り難う御座います。表記を編集致しました。 Chromeのデベロッパーツールで確認しましたが８００pxが効いており画面幅が７００px以上になった時に２００pxになるようしていますがデベロッパーツールで確認すると線で消されて８００pxが有効になっています。原因がわからず。。なぜ、メディアクエリで設定しても元々の幅が優先されてしまうのでしょうか？