[ 解決済 ] ロゴの位置の修正について

[sbj2021]

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

■ 質問内容：280×60サイズでヘッダーロゴをアップロードしたのですが
スマートフォンで見ると左側に大きな余白が写り、右側のが切れてしまいます。
ロゴをスマートフォンで左側にピッタリ表示させる方法を教えていただけないでしょうか？
Chromeで検証するとヘッダーの以下の部分にあたるような気がしますが確かではありません。

<meta name=”viewport” content=”width=640px”>

Attachments:

You must be logged in to view attached files.

[ls-t]

こんばんは 🙂
同条件（Lightning Pro＋280×60サイズのヘッダーロゴ使用）で当方は正常に表示（スマホ時ヘッダーロゴ中央寄せ）されておりますので、まずはプラグインを停止して改善するか確認してみてください。

※左側にぴったり、とのご希望ですが、中央寄せではなく左寄せにしたいということでしたらCSSの話になりますので、表示崩れが解決してから着手した方が良いと思います。

補足として、私の環境ではLightning Pro使用の3サイトすべて<meta name="viewport" content="width=device-width, initial-scale=1">でした。

[sbj2021]

早々にご回答ありがとうございました。
プラグインの問題ではなく、自分で追加したCSSに問題があることがわかり解決しました。

今回の不具合は以前にロゴのサイズを大きくしようとして以下のソースを追加していたことが原因でした。

.navbar-brand img {
max-height: 80px; max-width: 405px;
}

上記を削除したらきちんとスマートフォンの画面中央に表示されるようになりました。

お騒がせして申し訳ありませんでした。

なお今回ロゴファイルの幅を70pxに変更して、cssに以下を追記したら、ロゴが少し大きくなり、スマートフォンでも中央にきちんと表示できるようになりました。

.navbar-brand img {
max-height: 70px;
}

以上　報告させていただきます。

[投稿者]

投稿