HTML/CSS初心者です。 レスポンシブをしようとしてるのですが・・・ メディアクエリが効かないよ

HTML/CSS初心者です。 レスポンシブをしようとしてるのですが・・・ メディアクエリが効かないようです。

【HTML】
<div class="obi">
　　　<div class="moji">
　　　　　<h1 class="logo">
　　　　　　　<ul>
　　　　　　　　　<li>◯◯◯◯</li>
　　　　　　　　　<li>◯◯◯◯</li>
　　　　　　　　　<li>◯◯◯◯</li>
　　　　　　　</ul>
　　　</div>
</div>


これの「obi」というところは、ウェブサイト上の帯なんですが、これをパソコンの画面幅に合わせて下に伸ばしたいのですが、CSSでこのように指示しても・・・

【CSS】

@media screen and (max-width: 1205px) ｛
　　.obi ｛
　　　height: 500px;
　　 ｝
｝

何も変わりませんでした・・・ viewpointは入れてあります。 とにかく初心者です。 調べても出てきませんでした…

No.4 回答者： wanderer1 回答日時： 2021/07/08 12:54

max-width

ではなくて、

min-width

ではないでしょうか。

PCのデスクトップは1205pxよりも幅がありますよね。
PC幅いっぱいを想定しているなら、min-widthにしてみてください。

No.3 回答者： t_fumiaki 回答日時： 2021/07/08 11:14

max-width: 1205px

ブラウザの横幅が、～1205pxの間は、高さを500pxにします。
と言う意味です。

1205pxを超えた幅は、デフォルトで指定してる高さになります。

多分、逆の意味に思ってません？？

No.2 回答者： fujillin 回答日時： 2021/07/08 10:16

こんにちは

すでに回答が出ているので、多分、そちらで解決とは思いますが・・・

意図的なのかどうかわかりませんが、ご提示のCSSでは「全角空白」、「全角中括弧」等が使われています。
基本的には全て半角文字にしないとブラウザには解釈されません。

＞viewpointは入れてあります。
「viewport」のことでは？　綴りが違えば正しく解釈されません。


「そんなのわかってるよ！」なのかもしれませんけれど・・・
＞とにかく初心者です。
とのことですし、ご質問文からは読み取れませんでしたので念のため。

No.1 回答者： sukitaro 回答日時： 2021/07/08 09:39

意図しているのは、こういったことでしょうか。

.obi{
height:200px;
color:white;
background-color:blue;
}
@media screen and (max-width: 1205px) {
.obi{
height:500px;
}
}

1205pxよりも幅が広い画面では、高さ200pxになり、
狭い画面では、高さ500pxになります。