Le modifiche CSS non vengono applicate su mobile

[Richie (Richie Rich)]

Mi chiedo se qualcuno possa aiutarmi con un po’ di CSS, per favore.

Sto seguendo la guida Making custom CSS changes on your site e le modifiche che apporto hanno effetto sul desktop, ma non sul mobile.

In questo esempio, sto cercando di nascondere la Posizione dalla pagina del profilo utente e dalla scheda del profilo utente.

Ho applicato quanto segue in CSS > Comune:

/* Nasconde la Posizione dell'utente dalla sua pagina del profilo pubblico */
.user-profile-location {
  display: none;
}
/* Nasconde la Posizione dell'utente dalla sua scheda utente */
.user-card .location-and-website .location {
  display: none;
}

Testando su Safari e Chrome su laptop macOS, entrambi sono nascosti:

Testando su Safari e Chrome su iPhone e entrambi sono ancora molto visibili

Come accennato in precedenza, questo è il caso su più browser.

Allo stesso modo, utilizzo anche questo CSS per nascondere alcuni Campi Utente Personalizzati dal loro profilo pubblico:

/* Nasconde le piattaforme di social media dalla parte inferiore della loro pagina del profilo pubblico */
.instagram, .tik-tok, .facebook, .you-tube, .x-\(twitter\), .vimeo {
    display: none;
}

E nascondendo dalla Scheda Utente:

/* Nasconde le piattaforme di social media dalla parte inferiore della loro scheda utente */
.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;
}

Ma anche questi sono ancora visibili su mobile (sia sul profilo che sulla scheda)

Qualcuno riesce a capire cosa sto sbagliando?

[Arkshine]

Posso vedere la tua modifica, ma poiché il target non è abbastanza specifico, è stato sovrascritto dal CSS principale.
Puoi vederlo quando ispezioni l’elemento con il browser, ad esempio:

Devi aggiungere !important alle tue regole o essere più specifico come, ad esempio:

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

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

Di solito si consiglia di specificare correttamente una regola prima per evitare di colpire elementi imprevisti.

[Richie (Richie Rich)]

@Arkshine

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

Interessante, grazie @Arkshine

Mi piacerebbe molto puntare specificamente agli elementi precisi, piuttosto che essere generico e/o utilizzare override !important.

Come hai ricavato solo questi nomi di elementi specifici:

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

Dal pannello degli stili sul lato destro:

O è il caso che devo scorrere più in alto e annotare manualmente gli elementi padre?

Perché non ho bisogno di aggiungere .primary .primary-textual

[Arkshine]

@Richie

Come hai ricavato solo questi nomi di elementi specifici:

Ho semplicemente copiato e incollato ciò che fa il core:

Anche se applichi la stessa regola, il CSS di TC viene applicato dopo il core, quindi funziona.

Maggiori informazioni sulla specificità del CSS: Specificity - CSS | MDN.

@Richie

O è il caso che devo scorrere più in alto e annotare manualmente gli elementi padre?

Non è necessario includere ogni genitore, solo la sezione principale, per ridurre l’ambito del tuo obiettivo a un punto sufficientemente specifico.

[Richie (Richie Rich)]

@Arkshine

Non è necessario includere ogni genitore

Penso che sia questo il punto che mi ha confuso.

Ora funziona perfettamente sia su desktop che su mobile, ed è stato mirato specificamente invece di essere generico o usare !important.

Grazie ancora per l’aiuto e per l’intuizione

[Richie (Richie Rich)]

Per completezza e nel caso possa aiutare qualcun altro in futuro.

Questo CSS che ho provato a usare per nascondere alcuni campi utente personalizzati:

/* Nasconde le piattaforme di social media dalla parte inferiore della loro pagina del profilo pubblico */
.instagram, .tik-tok, .facebook, .you-tube, .x-\(twitter\), .vimeo {
    display: none;
}

Ha dovuto diventare questo per funzionare su desktop e mobile:

/* Nasconde le piattaforme di social media dalla parte inferiore della loro pagina del profilo */
.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;
}