固定ページ一部の、ヘッダーの高さを変更したい

[yunahana]

いつも大変お世話になっております。

Lightning proのテーマはCharmを使っています。
固定ページ一部のヘッダー画像を変更して使っていますが、その一部のヘッダーの高さを変更したいのです。
全体的な高さの変更は、外観⇒カスタマイズ⇒ページヘッダー設定⇒テキスト余白 で変更できるのですが、一部のヘッダーのみの高さを変更する方法が、ブラウザの「検証」で見てみましたが、分かりませんでした‥

方法がありましたら、ご教授お願いいたします。

[yunahana]

お世話になっております。

何だか分からないなりに下記ソースをカスタムCSSに記述してみました。

@media (min-width: 1200px){
.page-header {
    height: 150px;
}
}

@media (min-width: 480px){
.page-header {
    height: 250px;
}
}

.page-header_pageTitle, h1.page-header_pageTitle:first-child {
    margin: 90px 0 55px;

パソコン、スマホで思い通りの高さになりましたが、タイトルがセンターから上の方にずれてしまったので、下記ソースを追加しました。

.page-header_pageTitle, h1.page-header_pageTitle:first-child {
    margin: 90px 0 55px;

タイトルはパソコンではセンター近くなり良かったのですが、スマホでは下に下がりすぎてしまいました。
下記ソースを色々変更して試していると、高さ自体の変更も元に戻ってしまったりと上手くいきませんでした‥

.page-header_pageTitle, h1.page-header_pageTitle:first-child {
    margin: 90px 0 55px;

ソースの記述が素人考えで間違えていると思います‥
ご教授いただけますと助かります。
よろしくお願いいたします。

• この返信は5年、 3ヶ月前にyunahanaが編集しました。
• この返信は5年、 3ヶ月前にyunahanaが編集しました。

[石川＠Vektor,Inc.]

一部のヘッダーのみの高さ

これはどういう意味ですか？
特定のページだけという事でしょうか？

[yunahana]

お返事ありがとうございます！

はい！
特定のページをと言う意味です。
3ページのみ、ヘッダーの高さを大きくしたいと思っています。

よろしくお願いいたします。

• この返信は5年、 3ヶ月前にyunahanaが編集しました。

[石川＠Vektor,Inc.]

イマイチやりたい事が把握できていないので見当違いな回答かもしれませんがこういう事でしょうか？

.page-header_pageTitle,
h1.page-header_pageTitle:first-child {
    margin: 50px 0 30px;
}
@media (min-width: 480px){
	.page-header_pageTitle,
	h1.page-header_pageTitle:first-child {
	    margin: 70px 0 40px;
	}
}
@media (min-width: 1200px){
	.page-header_pageTitle,
	h1.page-header_pageTitle:first-child {
	    margin: 90px 0 55px;
	}
}

ページの指定は各記事の編集画面にあるCSSカスタマイズ入力欄（ExUnitの機能）か、bodyタグのclassにある投稿idをもとに指定すればいけます。

とりあえず書いてあったコードで気になったのは

1. 同じ指定の重さなら後に書いた方が優先される

min-width: 1200px より後に min-width: 480px が書いてあると、例えば1300pxでも min-width: 480px の条件に合致するので min-width: 480px に書いた指定が効いてしまう

2. 最後 } がない気がします

の２点です。

[投稿者]

投稿