レスポンシブが効きません

html
1<head>
2    <meta charset="UTF-8">
3    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
4    <link rel="stylesheet" href="../css/style.css">
5    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.4/css/all.css">
6    <title>iSara[イサラ]｜バンコクのノマドエンジニア育成講座</title>
7</head>
8<body>
9いろいろ入ってます。
10</body>

css
1@media screen and (max-width: 1173px) {
2  body{
3    background-color: black;
4  }
5}

メディアクエリを使ってもできませんでした。
上記の何か間違っているところをご指摘いただけたら嬉しいです。
ちなみに、!importantを使えばできましたが、できれば!importantなしでやりたいです。

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

回答1件

ベストアンサー

htmlにbody要素がないですね、、、

仮に以下のように</head>の下に入れたら動きませんかね？

<body>
  <p>テキスト</p>
</body>

投稿2020/05/10 06:37

omori3

総合スコア274

退会済みユーザー

2020/05/10 06:41

すみません。情報不足でした。 bodyタグの中にはいろいろコンテンツが入っています。すみません

omori3

2020/05/10 06:45

コード自体はcss反映こちらで確認できたのですが、 cssのパスが違うとかはありませんかね？ <link rel="stylesheet" href="../css/style.css"> の ../css/style.css のところです。

omori3

2020/05/10 06:50

!importantを使えばできましたとのことで、sytle.cssは読めてるようでしたね。 style.css内で bodyが上書きされているのだと思います。以下のようにmedia クエリーを下に書くと動くと思います。 body { background: white; } @media screen and (max-width: 1173px) { body{ background-color: black; } }

退会済みユーザー

2020/05/10 11:27

できました！ありがとうございます。

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