[ 解決済 ] スマホで表示したとき、見出しが折り返している

[菅原忠雄]

■ 利用テーマとバージョン :
Lightning G3 Pro

■ 質問内容：
作成したページをスマホで表示すると、見出しブロックで作成した文字列が左右の余白があるにもかかわらず折り返している。これを解決する方法が知りたい。
見出しは「h2」で使っています。
どうぞよろしくお願いいたします。

---

該当URL : https://*********

※該当URLはフォーラムライセンスが有効のユーザーにのみ表示されます

[DRILL LANCER]

h1.has-background,
h2.has-background,
h3.has-background,
h4.has-background,
h5.has-background,
h6.has-background {
	padding: 1.25em 2.375em;
}

おそらく上記 CSS が WordPress 本体側であったっているのが原因です。
padding: 1.25em 2.375em; は上下に 1.25em 左右に 2.375em の内側余白を追加するという意味です。

上記を修正した CSS コードを子テーマの style.css 等に追記すれば調整可能です。

[うなこ]

もう一つの案としましては、
いったん、管理画面から見出しの文字色と背景色をクリアしていただき、
次に、カスタマイズ→Lightning デザイン設定　の　見出しデザイン　の「H2 と メインセクション見出し」を「背景塗り」に設定しますと、h2見出しが「背景塗り」のデザインになります。
※この場合のは背景色はキーカラーで設定したカラーになります。

• この返信は2年、 10ヶ月前にうなこが編集しました。
• この返信は2年、 10ヶ月前にうなこが編集しました。
• この返信は2年、 10ヶ月前にうなこが編集しました。

Attachments:

You must be logged in to view attached files.

[菅原忠雄]

モデレーターさんありがとうございました。
「padding: 1.25em 2.375em;」を変更して解決しました。
変更値は「padding: 0.7em;」にしました。
センター配置のときはこれでいいようですが、左配置したときはこれではたぶん難しいだろうなと思いますが、今回はセンター配置で進めますのでこれで行きます。
お陰で助かりました。
ありがとうございました。

[投稿者]

投稿