[ 解決済 ] PCで表示した時のみロゴの位置を変更したい

VWSとは フォーラム Lightning [ 解決済 ] PCで表示した時のみロゴの位置を変更したい

[ 解決済 ] PCで表示した時のみロゴの位置を変更したい

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

    morisac
    参加者

    ■ WordPress のバージョン
    6.3

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

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

    ■ テーマのバージョン
    15.10.2

    ■ Pro Unit のバージョン
    0.25.1

    ■ スキンの種類
    Origin III

    ■ 期待する動作
    ロゴの位置をデフォルトより左に配置したいです(margin-left: -146px;)

    色々調べて、コードも入れてみましたが、どうにも反応しません。
    ちなみに検証モードでは期待通りに動きます。

    どなたかご教示をお願いいたします。

    ■ 自分で試した事
    下記のコードをそれぞれ追加CSS、もしくはCSSカスタマイズに挿入

    @media (min-width: 992px)
    .site-header--layout--nav-float .site-header-logo img {
        margin-left: -146px !important;
    }

    .site-header-logo img {
             margin-left: -146px !important;
    }

    @media (max-width: 991.98px)
     .site-header-logo img {
             margin-left: 0;
    }

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

    ■ 実際の症状

    実行されない
    imgが赤くなるので無効となっている?)


    PCでは期待通り実行はされるが、スマホ画面でも反映されてしまうため、不都合。


    ②の動きをSP時には無効化するために追加したものの実行されない
    (①と同様に、imgが赤くなるので無効となっている?)


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

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

    #78955

    DRILL LANCER
    モデレーター

    検証モードで @media を含むコードをコピーした場合 @media に必要な { が足りない状態の CSS が出力されます。


    (誤)

    @media (min-width: 992px)
    .site-header--layout--nav-float .site-header-logo img {
        margin-left: -146px !important;
    }

    (正)

    @media (min-width: 992px) {
    	.site-header--layout--nav-float .site-header-logo img {
    		margin-left: -146px !important;
    	}
    }


    (誤)

    @media (max-width: 991.98px)
     .site-header-logo img {
             margin-left: 0;
    }

    (正)

    @media (max-width: 991.98px) {
    	.site-header-logo img {
    		margin-left: 0;
    	}
    }

    P.S,
    設計思想の話ですが、Lightning では画像の水色のラインが PC 揃うように設計されています。
    デザインの好みは人それぞれだとは思います。しかし、あくまで個人的な意見を述べさせていただくならば、ロゴだけそのラインから飛び出すのはいかがなものかと思います。

    Attachments:
    You must be logged in to view attached files.
    #78960

    morisac
    参加者

    @DRILL LANCER さん

    ご回答ありがとうございます!
    いただいた方法(①)で解決しました!

    >検証モードで @media を含むコードをコピーした場合 @media に必要な { が足りない状態の CSS が出力されます。
    →なるほど…言われてみればすごく単純なミスでした…が、気づかなかったので本当に助かりました!
     今後も検証モードから引用する場合には注意します。

    >P.S,
    >設計思想の話ですが、Lightning では画像の水色のラインが PC 揃うように設計されています。
    >デザインの好みは人それぞれだとは思います。しかし、あくまで個人的な意見を述べさせていただくならば、ロゴだけそのラインから
    >飛び出すのはいかがなものかと思います。
    →個人的な意見としては同感です。ただ、ロゴが背景の天井部分になるように(エアコンと被らないように)というのがクライアント様からのご要望で…。

    ありがとうございました!

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