モバイルでCSSの編集が適用されない

[Richie (Richie Rich)]

CSSについて、どなたか手伝っていただけませんか？

Making custom CSS changes on your site のガイドに従っていますが、変更がデスクトップでは反映されるのに、モバイルでは反映されません。

この例では、ユーザープロフィールページとユーザープロフィールカードから Location を非表示にしようとしています。

CSS > Common に以下を適用しました。

/* ユーザーの公開プロフィールページからユーザーの場所を非表示にする */
.user-profile-location {
  display: none;
}
/* ユーザーカードからユーザーの場所を非表示にする */
.user-card .location-and-website .location {
  display: none;
}

macOSラップトップのSafariとChromeでテストしたところ、どちらも非表示になりました。

iPhoneのSafariとChromeでテストしたところ、どちらもまだ非常によく見えます

上記のように、これは複数のブラウザで発生しています。

同様に、これらのCSSを使用して、公開プロフィールからカスタムユーザーフィールドを非表示にしています。

/* 公開プロフィールページの下部からソーシャルメディアプラットフォームを非表示にする */
.instagram, .tik-tok, .facebook, .you-tube, .x-\\(twitter\\), .vimeo {
    display: none;
}

ユーザーカードから非表示にする:

/* ユーザーカードの下部からソーシャルメディアプラットフォームを非表示にする */
.public-user-field__you-tube, .public-user-field__vimeo, .public-user-field__instagram, .public-user-field__x-\\(twitter\\), .public-user-field__facebook, .public-user-field__tik-tok {
    display: none;
}

しかし、これらもモバイル（プロフィールとカードの両方）でまだ表示されています

私が間違っている点に気づいた人はいますか？

[Arkshine]

変更は確認できましたが、ターゲットの指定が不十分なため、コアCSSによって上書きされています。
ブラウザで要素を検査すると確認できます。例：

ルールに !important を追加するか、以下のように具体的に指定する必要があります。

.user-profile-location {
    display: none !important;
}

.user-main .about .details .user-profile-location {
    display: none;
}

予期しない要素をターゲットにしないように、通常はまずルールを適切に指定することが推奨されます。

[Richie (Richie Rich)]

@Arkshine

.user-main .about .details .user-profile-location

興味深いですね、@Arkshine さん、ありがとうございます

!important オーバーライドを使用したり、広範に指定したりするのではなく、正確な要素を具体的に対象としたいと考えています。

これらの特定の要素名のみをどのように導き出したのですか？

.user-main .about .details .user-profile-location {

右側のスタイルパネルからですか？

それとも、さらに上にスクロールして親要素を手動でメモする必要があるということでしょうか？

なぜ .primary .primary-textual を追加する必要がないのですか？

[Arkshine]

@Richie

これらの特定の要素名だけをどのように導き出したのですか？

コアがやっていることをコピー＆ペーストしただけです：

同じルールを適用しても、TC CSSはコアの後に適用されるため、機能します。

CSSの特定性について：https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_cascade/Specificity。

@Richie

それとも、さらに上にスクロールして、親要素を手動でメモする必要があるのですか？

すべての親を含める必要はありません。ターゲットのスコープを十分に特定できるポイントまで絞り込むために、主要なセクションを含めるだけで十分です。

[Richie (Richie Rich)]

@Arkshine

必ずしもすべての親を含める必要はありません

それが私を混乱させた部分だと思います。

デスクトップとモバイルの両方で完璧に動作しており、広範または!importantを使用するのではなく、具体的にターゲット設定されています。

ご協力と洞察をありがとうございました

[Richie (Richie Rich)]

将来誰かの役に立つかもしれないので、参考までに。

カスタムユーザーフィールドを非表示にしようとしたこのCSS：

/* プロフィールページの下部からソーシャルメディアプラットフォームを非表示にする */
.instagram, .tik-tok, .facebook, .you-tube, .x-\\(twitter\\), .vimeo {
    display: none;
}

デスクトップとモバイルの両方で機能するように、次のようになる必要がありました：

/* プロフィールページの下部からソーシャルメディアプラットフォームを非表示にする */
.user-main .about .details .public-user-fields .you-tube, .user-main .about .details .public-user-fields .vimeo, .user-main .about .details .public-user-fields .instagram, .user-main .about .details .public-user-fields .x-\\(twitter\\), .user-main .about .details .public-user-fields .facebook, .user-main .about .details .public-user-fields .tik-tok {
    display: none;
}