メディアクエリについて。

メディアクエリ内にレイアウト用の記述を追加すればスマートフォンで見たときだけサイドバーを隠して1カラムにすることもできるとは、どういう記述をすれば良いのでしょうか?出典先は、そろそろ常識？
マンガでわかるHTML＆CSSです。
赤松公太郎著
です。その第6章の所です。その6章最後のページです。教えて頂けると幸いです。
respon.html
〈!DOCTYPE html〉
〈html lang＝″ja″〉
〈head〉
〈meta charset＝″utfー8″〉
〈meta name＝″viewport″ content＝″width＝deviceーwidth,initialーscale＝1″〉
〈title〉Campus Art〈/title〉
〈link rel＝″stylesheet″ href＝″style.css″〉
〈/head〉
style.css
@media (maxーwidth: 599px){

main{
width: 90%;
}
main img
width: 100%;
}
}
です。メディアクエリに関するのは。教えて頂けると幸いです。

質問者からの補足コメント

• とすると、メディアクエリ内にレイアウト用の記述を追加すればスマートフォンで見たときだけサイドバーを隠して1カラムにすることもできるとは、どういう記述をすれば良いのでしょうか?
  については、どうなるのでしょうか?

  No.1の回答に寄せられた補足コメントです。 補足日時：2024/12/30 17:27

No.1 ベストアンサー 回答者： rera1016 回答日時： 2024/12/30 16:56

これだけでは足りません。

横幅が600px以上の時のスタイルを加えてあげないと、パソコン用のレイアウトに変わりません。

@media(min-width: 600px) {
main {
width: 50%;
}
main img {
width: 40%;
}
}

あと、質問の内容だとヘッダ部分しか書いておらず、ボディにmain要素の内容を書かないと何も反応しません。