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

[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はフォーラムライセンスが有効のユーザーにのみ表示されます

[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.

[morisac]

@DRILL LANCER さん

ご回答ありがとうございます！
いただいた方法（①）で解決しました！

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

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

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

[投稿者]

投稿