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

VWSとは フォーラム Lightning [ 解決済 ] ロゴの位置の修正について

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

  • このトピックには2件の返信、2人の参加者があり、最後にsbj2021により3年、 10ヶ月前に更新されました。
3件の投稿を表示中 - 1 - 3件目 (全3件中)
  • 投稿者
    投稿
  • #47688

    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.
    #47692

    ls-t
    参加者

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

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

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

    #47697

    sbj2021
    参加者

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

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

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

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

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

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

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

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

3件の投稿を表示中 - 1 - 3件目 (全3件中)
  • このトピックに返信するにはログインが必要です。