スマホの時だけ改行する方法について

[shigatarou]

お世話になります。

Dawnのテーマを使用してサイトを構築しましたが、スマホの時だけ改行する方法が分かりません。

調べてみると、<br class="sp">を紹介しているサイトがたくさん出てくるのですが、全て前提がliquidのようなのでjsonのDawnテーマには適用ができません。

サイトに書いてある通りに、アセットに改行専用のCSSを追加してtheme.liquidに読み込ませるところまではできるのですが、jsonに<br class="sp">を記述するとエラーになり、保存すらできません。

どなたか、jsonでスマホの時だけ改行する方法についてご教授頂けませんでしょうか。

宜しくお願いします。

[株式会社フルバランス]

Shigatarou様

はじめまして、フルバランスの園畑です。

ご質問を確認いたしました。

基本的にはおっしゃる通り、

cssのメディアクエリを使用し、画面の横幅によって切り替える方法を使用するかと存じます。

<br class="sp">

//横幅640px以上の時は適用しない
@media screen and (min-width:640px) {
 .sp {
  display:none;
 }
}

また、コードの修正はliquidファイルにて行うかと思いますので、基本的にjsonファイルを修正することは少ないかと存じます。

ご参考までに。

分からない点があれば、またいつでもご連絡ください。

フルバランス　園畑

[shigatarou]

株式会社フルバランス

園畑　様

お世話になります。

ライフクリエーションの鈴木と申します。

この度はご回答を頂きまして、ありがとうございます！

頂いた回答で未だ呑み込めていない部分があるので、申し訳ありませんが、追加で質問をさせて下さい。

教えて頂いたコードはCSSだと思います。

実際に改行したい位置に<br class="sp">を置けば改行できると思うのですが、そのコードがjsonには置けないという事で困っております。

園畑様は「基本的にjsonファイルを修正することは少ない」との事ですが、今回の改行は添付に記載の部分（ホームページのトップページの各見出し）を改行したいと思っています。

添付画像に記載の位置を改行するためには、jsonファイルの該当の文章の改行したい位置に<br class="sp">を置くしかないのかなと思っておりましたが、該当の文章はliquidファイルでも修正ができるという事なのでしょうか？

liquidファイルでDawnのトップページの文章を更新できるという当方の理解で合ったおりましたら、その方法をご教授頂けましたら幸いです。

お手数をお掛けしますが、何卒宜しくお願い申し上げます。