画像とテキストを横並び、かつレスポンシブ対応にしたい

[ryubo]

初投稿のため、質問方法に不備があるかもしれません。ご容赦ください。

コレクションページの説明欄の中で、「画像とテキストを横並びにして、かつPC⇔SPのレスポンシブ対応」がしたいです。

下記のようにcssとHTMLを使おうと思ったのですが、コード編集のどこにcssを差し込めばいいのか分からずにいます。

▼css

<style>

.flex{

 display: flex;

 justify-content: space-between;

}

 .flex>p{

 width: 49%;

} </style>

▼HTML

<div class="flex"> <p><img src="画像URL"></p> <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p> </div>

▼最終的に下記のようになればOKと考えています

PC版

SP版

●試したこと

管理画面＞オンラインストア＞カスタマイズ＞デフォルトのコレクション　で、

「セクションを追加」をしたのですが、すべてのコレクションページに情報が適用されてしまいました。

コレクションが複数存在し、コレクションごとに使用する画像もテキストも異なるため、

コレクションの編集ページで対応したいと考えています。

①コレクションページの説明欄で画像とテキストを横並び、かつレスポンシブ対応する方法があるのか？

②もしcssとHTMLで対応できる場合、cssはコード編集のどこに設置するのか？

をご教授いただけますと幸いです。

よろしくお願いいたします。

[福水正太]

初めまして。

株式会社ファイブビットの福水と申します。

②に関して、特定のコレクションにのみCSSを当てたい場合は、下記動画のように、コレクション詳細ページの「説明」から、<style>~~~</style>タグの中に記述してあげると反映されると思います。

https://gyazo.com/dc2040c0e3ef9cf02481dbbda8f4e85f

ぜひお試しください。

[ryubo]

福水様

はじめまして。

本件、すぐにご教授いただきありがとうございます。

教えていただいた通り、説明欄で<style>~~~</style>タグの中に記述したところ、画像とテキストを横並びで表示させることができました。

ご教授いただきありがとうございます！

とても助かりました。

[福水正太 · Accepted solution]

解決できてよかったです！

もしよかったら、「ベストソリューション」に選んでいただけると、今後の励みになるので、よろしくお願いします！！