レスポンシブ対応にしたい

Question

以下のコードを編集してHPを作成していますが
レスポンシブ対応のやりかたがわかりません、
おしえてください。

スマホ用のコードがたりないと指摘いただき、

@media (max-width: 767px){

　★★この中にスマホ用のCSSを記述します★★
}
とのヒントをいただいたのですが、

①場所　②スマホ用のcss

max-width: 500px

min-width: 500px

など、ほかもサイトを検索して試してみましたが、できませんでした。

<style>
.palent {
  text-align: center;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  width:800px;
  margin: 0px auto;
@media (max-width: 767px){ min-width:440px
}



.child {
  text-align: center;
  width: 400px;
}



.child > iframe {
  width: 320px;
  height: 180px;
}



.video_title {
  padding-top: 15px;
  padding-bottom: 40px;
  text-align: center;
  font-weight: bold;
  font-size: 18px;
}

</style>

<div class="palent">
	<div class="child">
		<iframe src="https://www.youtube....="0" allowfullscreen></iframe>
		<div class="video_title"><a href="" style="text-decoration:none;">「動画タイトル」</a></div>
	</div>
	<div class="child">
		<iframe src="https://www.youtube...." frameborder="0" allowfullscreen></iframe>
		<div class="video_title"><a href="" style="text-decoration:none;">「動画タイトル」</a></div>
	</div>
</div>

<div class="palent">
	<div class="child">
		<iframe src="https://www.youtube...." frameborder="0" allowfullscreen></iframe>
		<div class="video_title"><a href="" style="text-decoration:none;">「動画タイトル」</a></div>
	</div>
	<div class="child">
		<iframe src="https://www.youtube...." frameborder="0" allowfullscreen></iframe>
		<div class="video_title"><a href="" style="text-decoration:none;">「動画タイトル」</a></div>
	</div>
</div>

Comments

[m.ts10806]

コードやエラーはマークダウンのcode機能を利用してご提示ください。
https://teratail.com/questions/238564

あと「レスポンシブにしたい」といっても「どういうときにどうしたいか」を定義しないことには対応方法は決まりません。自身で試したこと調べたことと起きている問題も具体的に決めてください。作業依頼になっています。
iframeばかりで何とも言えない部分はありますが、
動画の宣伝のような意図がないのでしたら、URLは仮のものや例示ドメインに変更した方が良いかと思います。

[mold]

回答および、丁寧にご教授いただきありがとうございます。やりたいことは、自社のyoutube動画を2個並列したく、いろいろネットで検索して、上記のようなcssコードを発見して、埋め込みをしました。PC上では問題なくみれますが、スマホでは見切れてしまいます。これまで業者さんにお願いしていたのですが、経費削減のため事務がやることになり、全くのド素人が更新をする事になった次第です。何からやればいいのかもわかりませんが、とりあえず更新をということで、四苦八苦しています。誠に恐縮ではございますが、何卒よろしくお願いいたします。

[m.ts10806]

マークダウンぐちゃぐちゃなので、そこは投稿画面のプレビュー観ながら調整してもらえたらと。
動画や画像など以外はせめてコピペで再現できるように配慮いただきたいです（手間が増えるので回答も得られなくなります）

[mold]

ありがとうございます。まるっとコードが囲まれたカタチがマークダウンということですか。。すみません。再選択してみましたが、まだぐちゃぐちゃですか...。投稿画面のプレビューがさっきよりは、すっきりしたように見えますが、あっていますか？お忙しい中、お付き合いいただいて本当に申し訳ありません。ありがとうございます。

[m.ts10806]

先のコメントで提示した質問の回答にあるようにバッククォート３つで囲めばよいです。（私の回答ですが…）
ファイルごとになってるとありがたいです。
見た感じ1ファイルに全て書かれてるのでしょうか？でしたら、ブロックは１つで良いですね。
どこからどこまでが1ファイルなのかは、質問者にしかわからないので

[mold]

ありがとうございます。バッククォート、そういうことですね。ありがとうございます。本当にこんな高度な方たちのなかでお恥ずかしい質問で大変恐縮です。1ファイルに変更しました。何が問題なのかをお教えただけると、大変助かります。よろしくお願いいたします。

[m.ts10806]

いえ、質問すること自体何も恥ずかしいことではないです。
赤の他人が読んで要件が分かることが大前提（ここは技術力より文章力やコミュニケーション能力の問題です）

[m.ts10806]

ただ、まとめられたコードにメディアクエリ@mediaの設定がないような。
試して想定の動作しなかったコードを提示してください。
でないとこちらの手元で「できなかった」ことが再現できませんので、作業依頼になってしまいます。

[mold]

ありがとうございます。なるほど、ご親切にありがとうございます。勉強になります。
PCのサイズ設定の下と思われる箇所に@media (max-width: 767px){ min-width:440px }　を追記しました。これではスマホ用のサイズにはなりませんでした。

[m.ts10806]

「ヒントをいただいた」とありますが、おそらくそのヒントも理解されてないのだろうなと思いました（文法について調べる必要はあります）
含めて回答にしています。

Answer 1

そもそも、文法エラーがあります。

※以下で確認
https://jigsaw.w3.org/css-validator/#validate_by_input

.palent の閉じがないのもそうですが、メディアクエリの導入の仕方が間違っていると思います。
「一部だけ変えたい」のは分からなくはないですが、プロパティの中に書けるものではないです。
MDNも確認を。
https://developer.mozilla.org/ja/docs/Web/CSS/@media

CSSの基本として「基本は後勝ち」なので、その部分だけ変えるように別で書きます。

例：※未検証

.palent {
  text-align: center;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  width:800px;
  margin: 0px auto;
}

@media (max-width: 767px){
    .palent {
      min-width:440px
    }
}

このように書くことで指定要素の指定プロパティだけ書き換えることができます。
※これで想定通りに動くかは別なので、文字サイズとか色とか分かりやすいプロパティで試してから本題に入ると良いです

ただ、メディアクエリ試すにしても
もっとミニマムコードで試した方が良いと思います。

body{
    background-color:red;
}
@media (max-width: 767px){
    body {
        background-color:blue;
    }
}
@media (max-width: 480px){
    body {
        background-color:yellow;
    }
}

みたいな。

ネット上や参考書のサンプルコードを確認するのも悪いわけではないですが、
やはり既存のCSSフレームワークのコードを確認されたほうが「有効な使い方」の勉強にはなると思います。

例えばBootstrapの場合（CDNのコードから一部抜粋）

.container {
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

@media (min-width: 576px) {
  .container {
    max-width: 540px;
  }
}

@media (min-width: 768px) {
  .container {
    max-width: 720px;
  }
}

@media (min-width: 992px) {
  .container {
    max-width: 960px;
  }
}

@media (min-width: 1200px) {
  .container {
    max-width: 1140px;
  }
}

Comments

[mold]

ありがとうございます。いただいた情報を再度、コードと照らし合わせチャレンジしてみます。そもそも文法からですよね、仰るとおりです。ご丁寧にお付き合いいただき本当にありがとうございます。また質問します。よろしくお願いいたします。

[m.ts10806]

文法チェック機能のあるエディタの利用は必須だと思います。
プラグインが必要なツールもあるでしょうけど、「文法としてあり得ない」「存在しない設定」はエディタ上で警告してくれます。
ブラウザ上ではCSSやHTMLはエラーを出してくれないので、この手のツールは必須です。
「実行しないと分からない」というのは非効率ですからね。
これは他の言語でも同じです。

Answer 2

△△△△△△△△△△