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

タグ: Lightning G3 Pro Unit

このトピックには2件の返信、2人の参加者があり、最後にmorisacにより1年、 2ヶ月前に更新されました。

3件の投稿を表示中 - 1 - 3件目 (全3件中)

投稿者

投稿
2023年8月26日 2:33 PM #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はフォーラムライセンスが有効のユーザーにのみ表示されます
2023年8月30日 8:10 AM #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.
2023年8月30日 10:13 AM #78960

morisac
参加者

@DRILL LANCER さん

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

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

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

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

投稿