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

[mk777]

下記のクラス名を見つけて、背景色を設定しました。

でも、反映されないのです。

     #shopify-section-header .site-header{
        padding-top: 30px!important;
        padding-bottom: 36px!important;

        background: -moz-linear-gradient(180deg, #000 30%,transparent 100%) !important;
        background: -webkit-linear-gradient(180deg, #000 30%,transparent 100%) !important;
       /* background: linear-gradient(180deg, #000 30%,rgba(255, 0, 0, 0) 100%) !important; */
        background: linear-gradient(180deg, #000 30%,transparent 100%) !important;
        
    }   
   
header .site-header .logo--center{
        background: -moz-linear-gradient(180deg, #000 30%,transparent 100%) !important;
        background: -webkit-linear-gradient(180deg, #000 30%,transparent 100%) !important;
        /* background: linear-gradient(180deg, #000 30%,rgba(255, 0, 0, 0) 100%) !important; */
        background: linear-gradient(180deg, #000 30%,transparent 100%) !important;    
}

背景のグラデーションは、パソコンの画面では、反映されています。

モバイルのサイズにすると、黒のままでグラデーション反映されないのです。

[Qcoltd]

完全に推測で回答しますので、的外れであってもご容赦ください。

!importantを指定されていて反映されないのであれば、

考えられる理由は3つかと思います。

1. 掲載いただいたCSSコードの下にも同様のDOM要素のスタイルがあり、その記述にも!importantを指定されている
2. 掲載いただいたCSSコードより詳細度が高い記述があり、その記述にも!importantを指定されている
3. 背景色が他のDOM要素にも指定されていて、その要素の背景色が表示されてしまっている

ご参考まで。

(キュー田辺)

[mk777]

ありがとうございます。

私も、ウェブサイトの表示をゆっくり行ってみたところ、グラデーション表示のあとから、黒色で上書きされている様子を確認しました。

スクロールのJavaScriptの中にも、

site-header を見つけました。

DOMの要素の中の可能性は、高いと思います。

教えてくださって、ありがとうございます。

この点を手がかりに、調べてみます。

[mk777]

この数日ずっと試行錯誤していましたが、firefoxやChromeの開発者ツールを使って要素を調べていますが改善されないです。

DOMの確認として、JavaScriptのコードを探していますが、headerの背景色を指定している部分が、見つかりません。

スクロールが関係しているようなのですが、背景色を書き換えているコードを見つけることが出来ないので、暗礁に乗り上げています。

純粋なdebutのテーマでは、ないようです。

下記の方の投稿で、私のコードでスマホの画面でも、背景色をグラデーションにできています。

実際、グラデーションは、反映されています。

でも、上書きされているようです。

ビルダーのアプリがインストールされていますが、依頼主の都合もあり、アプリは触れないと思います。

CSSは、custom.cssがあります。

theme.cssも修正してみましたが、変化無いです。

JavaScriptの動作を打ち消すために、要素が書き換わったあとにグラデーションにする方法を試したいと思いますが、コード作成に手間取っています。

ヒントで構いませんので、ご教示頂けましたら幸いです。

[mk777]

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

お騒がせしました。

原因が、分かりました。

ヘッダーメニューの下に有るスライドショーのsectionに、margin-topが設定されていました。

コメントアウトしたら、きれいにグラデーション出来ました。

色々と教えて頂きまして、ありがとうございます。

[kotobato]

こんにちは。

うちのdebutのtheme.cssのいちばん下にはりつけてみたら

ヘッダはグラデ―ションになってるようです。

確証はないのですが、もし既存のtheme.cssなどの中で

直接書き込んで直しているならば 

前後にメディアサイズの指定があって効かないのかもしれません。

書く位置や外部ファイル読み込み、あるいは

その記述自体をモバイルサイズ指定で囲んでみるなどを

変えてみるのはどうでしょう?

[mk777]

ありがとうございます。

今、

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

の中に、書いています。

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

ありがとうございます。

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

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

とても、助かります。

ありがとうございます。

[mk777]

先日は、ありがとうございます。

実は、iPhone12向けのデザインしたsectionがあります。

そのメディアクエリの中に入れてみたのですが、変化が無かったです。

上書きされているのですが、Chromeやfirefoxの開発者ツールで要素を確認しても、背景色を黒としている場所を見つけることが出来ないのです。

JavaScriptでスクロールが関係している様子までは、突き止めています。

でも、JavaScriptでモバイルのときに背景色を書き換えている部分が分からず困っています。

themeは、純粋なdebutではなく、誰かがカスタマイズしたものを使っているようです。

custom.cssがあり、そこでコードを書き加えるなど作業しています。

[mk777]

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

原因の特定が出来ました。

上書きされているのではなく、本当のBodyの背景色でした。

ヘッダーの下にあるスライドショーのsectionに、margin-topがありました。

これをコメントアウトしたら、きれいにグラデーション出来ました。

色々教えてくださって、ありがとうございます。

[mk777 · Accepted solution]

ようやく解決しました。

JavaScriptなどで要素に上書きというか、さらに重なりがあるように見えたのです。

でも、実は、本当のBodyの背景色の黒が表示されていました。

ヘッダーの下のスライドショーに、margin-topが設定されていました。

これをコメントにしたら、無事にグラデーション出来ました。

    .slideshow--large {
        min-height: 100vh !important;
        /*margin-top: 112px;*/
        height: auto !important;
    }

[Qcoltd]

返信遅くなりました。

解決された、とのことでよかったです。

(キュー田辺)