Les modifications CSS ne sont pas appliquées sur mobile

Soutien
1

Je me demande si quelqu’un pourrait m’aider avec du CSS s’il vous plaît.

J’ai suivi le guide Making custom CSS changes on your site et les modifications que j’apporte prennent effet sur ordinateur, mais pas sur mobile.

Dans cet exemple, j’essaie de masquer la Location de la page de profil de l’utilisateur et de la carte de profil de l’utilisateur.

J’ai appliqué ce qui suit dans CSS > Commun :

/* Hide the User Location from their public profile page */
.user-profile-location {
  display: none;
}
/* Hide the User Location from their user card */
.user-card .location-and-website .location {
  display: none;
}

Test sur Safari et Chrome sur un ordinateur portable macOS, les deux sont masqués :

Screenshot 2025-02-23 at 18.52.47
Screenshot 2025-02-23 at 18.52.471920×940 132 KB

Test sur Safari et Chrome sur iPhone et les deux sont toujours très visibles :thinking:

IMG_2192.PNG
IMG_2192.PNG960×2079 118 KB

Comme mentionné ci-dessus, c’est le cas sur plusieurs navigateurs.

De même, j’utilise également ce CSS pour masquer certains champs personnalisés de l’utilisateur de leur profil public :

/* 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;
}

Et masquer depuis la carte utilisateur :

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

Mais ceux-ci sont également toujours visibles sur mobile (sur le profil et sur la carte) :thinking:

Quelqu’un peut-il repérer ce que je fais de mal ? :person_shrugging:

3

Je peux voir votre modification, mais comme la cible n’est pas assez spécifique, elle a été écrasée par le CSS principal.
Vous pouvez le voir lorsque vous inspectez l’élément avec le navigateur, par exemple :

The image shows CSS code with styles for elements like 'about', 'details', 'user-profile-location', and 'user-profile-website', including properties like 'justify-content', 'display', and 'argin-right', with content slightly obscured by a red horizontal line. (Captioned by AI)
The image shows CSS code with styles for elements like 'about', 'details', 'user-profile-location', and 'user-profile-website', including properties like 'justify-content', 'display', and 'argin-right', with content slightly obscured by a red horizontal line. (Captioned by AI)605×361 9.07 KB

Vous devez soit ajouter !important à vos règles, soit être plus spécifique comme par exemple :

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

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

Il est généralement recommandé de spécifier correctement une règle d’abord pour éviter de cibler des éléments inattendus.

5 « J'aime »
4

Intéressant, merci @Arkshine :smiley:

J’aimerais beaucoup cibler précisément les éléments, plutôt que d’être général et/ou d’utiliser des surcharges !important.

Comment avez-vous obtenu ces noms d’éléments spécifiques :

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

Depuis le panneau des styles sur le côté droit :

Screenshot 2025-02-23 at 20.04.32
Screenshot 2025-02-23 at 20.04.321920×967 146 KB

Ou est-ce que je dois faire défiler plus haut et noter manuellement les éléments parents ?

Pourquoi n’ai-je pas besoin d’ajouter .primary .primary-textual :thinking:

Screenshot 2025-02-23 at 20.06.15
Screenshot 2025-02-23 at 20.06.151512×912 190 KB

1 « J'aime »
5

J’ai simplement copié-collé ce que fait le cœur :

image
image603×118 3.69 KB

Même si vous appliquez la même règle, le CSS de TC est appliqué après le cœur, donc cela fonctionne.

En savoir plus sur la spécificité CSS : Specificity - CSS | MDN.

Vous n’avez pas nécessairement besoin d’inclure tous les parents, juste la section principale, pour réduire la portée de votre cible à un point suffisamment spécifique.

6

Je pense que c’est ce qui m’a dérouté.

Cela fonctionne parfaitement sur ordinateur et sur mobile maintenant, et est spécifiquement ciblé au lieu d’être large ou d’utiliser !important.

Merci encore pour votre aide et votre perspicacité :bowing_man:

1 « J'aime »
7

Pour être complet et au cas où cela aiderait quelqu’un d’autre à l’avenir.

Ce CSS que j’ai essayé d’utiliser pour masquer certains champs utilisateur personnalisés :

/* Masquer les plateformes de médias sociaux de la partie inférieure de leur page de profil public */
.instagram, .tik-tok, .facebook, .you-tube, .x-\(twitter\), .vimeo {
    display: none;
}

A dû devenir ceci pour fonctionner sur ordinateur et mobile :

/* Masquer les plateformes de médias sociaux de la partie inférieure de leur page de profil */
.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;
}
8

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.