同ページでの、PCの内容とスマホでの内容を変えることは可能でしょうか？

[sakumasa]

サイトに詩を数点載せています。

今読んでいる詩のページから、別の詩のタイトル（メニュー）に行けるようにしてあります。

PCでの見え方は問題ないのですが、スマホでの見え方に違和感を感じます。

スマホでは、詩（本文）のすぐ下に別の下のタイトル（メニュー）があり、つながっている感じでとても読みづらいと思いました。

スマホではハンバーガーメニューですぐ別の詩に行けるので、本文の下に詩のタイトル（メニュー）がなくてもいいかな、と思いました。

スマホだけ詩のタイトルを削除することは可能でしょうか？

もしくは、スマホだけ本文と詩のタイトル（メニュー）の間にラインを引くのはどうかな、と思いました。

アドバイスいただけましたら幸いです。

[wugk_]

こんにちは！
ストアのURLをいただけたら、線を引いた時の見え方と、非表示にする方法お伝えすることができると思うのでよろしくお願いします！

[sakumasa]

はじめまして。

https://gorsch-village.com/pages/monologue_c_1

このページです。

どうぞよろしくお願いいたします。

[wugk_]

ありがとうございます！

例えばメニューに下線を入れると以下のようになります。

これはCSSを追加するだけなので簡単にできます！

 テーマのカスタマイズ画面を開いていただき、「テーマ設定」>「カスタムCSS」に以下のCSSを貼り付けてみてください。

.page-section-monologue-menu ul li {
  border-bottom: solid 1px #000000;
}

実際に設定すると、以下のようになると思います、

もしスマホ画面のときメニューを非表示にしたい場合は、代わりに以下のCSSを貼り付けてみてください。

@media screen and (max-width: 843px) {
  .page-section-monologue-menu ul li {
    display: none;
  }
}

※ max-width: 843px としているのは、質問者様のECサイトでのレスポンシブの閾値に揃えているためです。