テーマDebutのモバイルのheaderの背景色を変えたい

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の変更は不要。テーマはカスタマイズ済みだが、原因はレイアウト(余白)設定に起因。

状況: 解決済み。未解決の課題なし。

Summarized with AI on February 16. AI used: gpt-5.

ありがとうございます。

今、

@media screen and (max-width: 767px)

の中に、書いています。

でも、グラデーションになることを確認できましたので、とても助かります。

ありがとうございます。

先の方に返信したように、グラデーションの上から上書きされている様子を確認しました。

メディアクエリの場所も、工夫してます。

とても、助かります。

ありがとうございます。