レスポンシブ対応時に文字の改行をしたい

  • 解決済 azejun0127

    (@azejun0127)


    1年、 10ヶ月前

    Lightningを使用してサイトを作成しています。
    バージョンは6.2.2です。


    PC・タブレットだと問題ないのですが、スマホ時に文字の改行がおかしくなり見栄えが悪いため、スマホの時のみ特定の場所で改行を行いたいのですがWordPressではどのように設定したらいいのでしょうか。
    widthを設定してもうまく反映されなくて困っています（ ; ; ）
    何かいい方法をご教授いただけましたら幸いです。

    また追加cssクラスを設定してもcssが反映されません。デベロッパーツールでクラス名を見ても、自分がつけたクラス名じゃないのでよくわからず指定する部分が違っていたということが多いです。みなさんはデベロッパツールからクラス名を取得してcssを記述しているのでしょうか？それとも何か簡単な方法がありますでしょうか？
    固定ページのブロック上でデザインを変更した場合、htmlの方でデザインが設定されていると思うのですがこの場合cssで変更しても反映されませんでしょうか？

2件の返信を表示中 - 1 - 2件目 (全2件中)
  • genepine

    (@genepine)

    1年、 10ヶ月前

    ブロックエディタ利用の場合

    • 段落ブロックで文章を記入
    • 縦三点メニューで、ブロックをHTMLで編集
    • 改行したい所に<br class="br-sp"> を挿入

    .br-sp {
    display: none;
    }

    @media screen and (max-width: 1080px) {
    .br-pc {
    display: none;
    }

    .br-sp {
    display: inline-block;
    }
    }

    https://qiita.com/narikei/items/3d0a50c8d621dfe6815e
    qiitaが消えると情報がなくなるので引用します。

    max-width:はテーマに沿って決める。
    スマホのみ改行を入れたことを示すために、HTML編集のままにする。またはビジュアル編集で戻してもよいですが、どこに入れたか一目でわからなくなります。


    トピック投稿者 azejun0127

    (@azejun0127)

    1年、 10ヶ月前

    ご回答ありがとうございます。
    なるほど、<br>をスマホ対応時意外で非表示にすればいいのですね。
    その発想は思い浮かびませんでした汗

2件の返信を表示中 - 1 - 2件目 (全2件中)
  • トピック「レスポンシブ対応時に文字の改行をしたい」には新たに返信することはできません。