CSS-Änderungen werden auf dem Handy nicht angewendet

[Richie (Richie Rich)]

Ich frage mich, ob mir jemand bitte mit etwas CSS helfen könnte.

Ich habe die Anleitung unter Making custom CSS changes on your site befolgt und die Änderungen, die ich vornehme, wirken sich auf dem Desktop aus, aber nicht auf dem Handy.

In diesem Beispiel versuche ich, den Standort von der Profilseite des Benutzers und von der Benutzerprofilkarte aus zu verbergen.

Ich habe Folgendes unter CSS > Allgemein angewendet:

/* Versteckt den Standort des Benutzers auf seiner öffentlichen Profilseite */
.user-profile-location {
  display: none;
}
/* Versteckt den Standort des Benutzers auf seiner Benutzerkarte */
.user-card .location-and-website .location {
  display: none;
}

Beim Testen auf Safari und Chrome auf einem macOS-Laptop sind beide versteckt:

Beim Testen auf Safari und Chrome auf dem iPhone sind beide immer noch sehr gut sichtbar

Wie oben erwähnt, ist dies bei mehreren Browsern der Fall.

Ähnlich verwende ich dieses CSS, um einige benutzerdefinierte Benutzerfelder aus deren öffentlichem Profil auszublenden:

/* Versteckt die Social-Media-Plattformen aus dem unteren Teil ihrer öffentlichen Profilseite */
.instagram, .tik-tok, .facebook, .you-tube, .x-\(twitter\), .vimeo {
    display: none;
}

Und Verstecken von der Benutzerkarte:

/* Versteckt die Social-Media-Plattformen aus dem unteren Teil ihrer Benutzerkarte */
.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;
}

Aber auch diese sind auf dem Handy (sowohl im Profil als auch auf der Karte) immer noch sichtbar

Kann jemand erkennen, was ich falsch mache?

[Arkshine]

Ich kann Ihre Änderung sehen, aber da das Ziel nicht spezifisch genug ist, wurde es von der Kern-CSS überschrieben.
Sie können dies sehen, wenn Sie das Element mit dem Browser inspizieren, z. B.:

Sie müssen entweder !important zu Ihren Regeln hinzufügen oder spezifischer sein, wie zum Beispiel:

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

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

Es wird generell empfohlen, eine Regel zuerst richtig zu spezifizieren, um die Anvisierung unerwarteter Elemente zu vermeiden.

[Richie (Richie Rich)]

@Arkshine

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

Interessant, danke @Arkshine

Ich möchte sehr gerne die präzisen Elemente gezielt ansprechen, anstatt breit gefächert zu sein und/oder !important-Überschreibungen zu verwenden.

Wie hast du nur diese spezifischen Elementnamen abgeleitet:

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

Vom Stil-Panel auf der rechten Seite:

Oder muss ich weiter nach oben scrollen und die Elternelemente manuell notieren?

Warum muss ich .primary .primary-textual nicht hinzufügen

[Arkshine]

@Richie

Wie sind Sie nur auf diese spezifischen Elementnamen gekommen:

Ich habe einfach kopiert und eingefügt, was der Kern tut:

Selbst wenn Sie die gleiche Regel anwenden, wird TC CSS nach dem Kern angewendet, sodass dies funktioniert.

Mehr über CSS-Spezifität: Specificity - CSS | MDN.

@Richie

Oder muss ich weiter nach oben scrollen und die Elternelemente manuell notieren?

Sie müssen nicht unbedingt jedes Elternelement angeben, nur den Hauptabschnitt, um den Geltungsbereich Ihres Ziels auf einen ausreichend spezifischen Punkt zu reduzieren.

[Richie (Richie Rich)]

@Arkshine

Du musst nicht unbedingt jedes Elternteil einbeziehen

Ich glaube, das hat mich verwirrt.

Es funktioniert jetzt perfekt auf Desktop und Mobilgeräten, und es ist spezifisch zielgerichtet, anstatt breit gefächert zu sein oder !important zu verwenden.

Vielen Dank nochmals für die Hilfe und die Einblicke

[Richie (Richie Rich)]

Zur Vollständigkeit und falls es jemandem in Zukunft hilft.

Dieses CSS, das ich versucht habe zu verwenden, um einige benutzerdefinierte Benutzerfelder auszublenden:

/* Hide the social media platforms from the lower part of their public profile page */
.instagram, .tik-tok, .facebook, .you-tube, .x-\(twitter\), .vimeo {
    display: none;
}

Musste dies werden, um auf Desktop und Mobilgeräten zu funktionieren:

/* Hide the social media platforms from the lower part of their profile page */
.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;
}