[ 解決済 ] スマホで表示したとき、左右の余白が大きすぎる

[菅原忠雄]

■ WordPress のバージョン
5.8.2

■ テーマ・プラグインは全て最新版で確認してください。
確認しました。

■ テーマの種類
Lightning ( G3 ) + Lightning G3 Pro Unit

■ テーマのバージョン
14.12.1

■ Pro Unit のバージョン
0.13.2

■ スキンの種類
Origin III

■ 関連しそうなプラグインを一つづつ停止して症状が改善するか確認してください。
確認しました。

■ プラグインの種類・バージョン
Lightning G3 Pro Unit
VK Blocks Pro 1.20.1
VK All in One Expansin Unit 9.68.4.0

※実際には、TablePress、UpdraftPlusほか使っていますが、これらを削除しても症状は改善されませんでしたので記載は省略しました。

■ 期待する動作
PC表示、タブレット(iPad Air)で表示したときはとくに問題はないのですが、スマホ（iPhone7）で表示したとき、左右の余白が広すぎてコンテンツ表示エリアが狭くなっています。
もともと左右の余白はあるようですが、このページはテキスト中心ですので、コンテンツエリアが狭いと使いにくいと思われます。
左右の余白を狭くしてコンテンツエリアを広げる方法が知りたい。
よろしくお願いいたします。

■ 自分で試した事
●新たに確認のためにWordPress環境を構築しテーマ、プラグイン、メニューなど一通りの環境を該当URLで示したページ「規約」の環境とほぼ同じ設定にして症状が出るかどうか確認しましたが「左右の余白が広すぎる」という症状はありませんでした。

●該当URLで示したページを作る前に下調べ用に作っていた環境でも、スマホ表示時左右の余白が広い症状がみられたので、必要最小限のプラグインを残して削除して結果を確認しましたが、症状は変わりませんでした。
●ほかに外観/カスタマイズの設定値を確認しました。この中で、レイアウト設定/コンテナ設定を次のように設定していましたので、これらをすべて削除して空白の状態にしましたが、変わりありませんでした。
xs:768 sm:768 md:960 lg:960 xl:960

■ 症状が発生するブラウザ
Safari

■ 実際の症状
「https://kamikitax.com/hanakitacomi/kiyaku」ページをスマホ（iPhone7）で表示すると、左右の余白が大きすぎてコンテンツエリアが狭くなってい見づらくなっています。
この症状は、このページだけではなくトップページを含めてほとんどすべてのページで同じ症状です。
PCとかタブレットではほぼ普通の表示です。

---

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

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

[うなこ]

セクションベース設定がセクションベースありになっていると思われます。
管理画面【外観】>【カスタマイズ】>【Lightning デザイン設定】から「セクションベース設定」をセクションベースなし　にして「公開」ボタンを押してください。

セクションベース設定

• この返信は3年前にうなこが編集しました。

[菅原忠雄]

うなこ様
解決しました！　お陰で助かりました。
ありがとうございます。

[國弘浩司]

こんにちわ。私は同様の設定をしても解決できませんでした。できれば両サイド余白を2pxくらいにしたいのですが…。ご教授宜しくお願い致します。

[うなこ]

國弘浩司さま

こんばんは。
本スレッドが解決済みとなっておりますので、できましたら別でスレッドをたてていただけますと、他のユーザーの方の目にもとまりやすくなり、解決が早いかもしれません。

と言いますのも、本スレッドとはちょっと意図が違う気がしております。

できれば両サイド余白を2pxくらいにしたいのですが…。ご教授宜しくお願い致します。

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

[投稿者]

投稿