ありがとうございます。
今、
@media screen and (max-width: 767px)
の中に、書いています。
でも、グラデーションになることを確認できましたので、とても助かります。
ありがとうございます。
先の方に返信したように、グラデーションの上から上書きされている様子を確認しました。
メディアクエリの場所も、工夫してます。
とても、助かります。
ありがとうございます。
Topic summary
課題: Shopify Debutのモバイル表示で、ヘッダー背景のグラデーションがPCでは反映されるが、スマホでは黒一色になる。
試行内容:
- CSSで #shopify-section-header .site-header 等にlinear-gradientを!importantで指定。
- @media (max-width: 767px) 内にも追記。custom.css / theme.css で調整。
- 開発者ツールで確認し、スクロール関連のJavaScriptがsite-headerを書き換えている可能性を疑う。
- 他者からは「CSSの競合/詳細度」「別DOM要素（ページ構造要素）の背景が見えている」「読み込み順・メディアクエリ範囲」の指摘と、theme.css末尾への記述で動作する報告。
観測された挙動:
- いったんグラデーションになった後、黒で上書きされるように見える。
原因と解決:
- 上書きではなく、ヘッダー直下のスライドショーセクションのmargin-topにより、ヘッダー下にbodyの黒背景が露出していた。
- .slideshow–large の margin-top: 112px をコメントアウトして解決（min-height: 100vh, height: auto は維持）。
補足:
- JavaScriptの変更は不要。テーマはカスタマイズ済みだが、原因はレイアウト（余白）設定に起因。
状況: 解決済み。未解決の課題なし。