Las ediciones CSS no se aplican en el móvil

[Richie (Richie Rich)]

Me pregunto si alguien podría ayudarme con algo de CSS, por favor.

He estado siguiendo la guía Making custom CSS changes on your site y los cambios que hago surten efecto en el escritorio, pero no en el móvil.

En este ejemplo, estoy intentando ocultar la Ubicación de la página de perfil del usuario y de la tarjeta de perfil del usuario.

He aplicado lo siguiente en CSS > Común:

/* Ocultar la Ubicación del Usuario de su página de perfil público */
.user-profile-location {
  display: none;
}
/* Ocultar la Ubicación del Usuario de su tarjeta de usuario */
.user-card .location-and-website .location {
  display: none;
}

Probando en Safari y Chrome en un portátil macOS, ambos están ocultos:

Probando en Safari y Chrome en iPhone y ambos siguen muy visibles

Como se mencionó anteriormente, este es el caso en varios navegadores.

Del mismo modo, también utilizo este CSS para ocultar algunos campos de usuario personalizados de su perfil público:

/* Ocultar las plataformas de redes sociales de la parte inferior de su página de perfil público */
.instagram, .tik-tok, .facebook, .you-tube, .x-\(twitter\), .vimeo {
    display: none;
}

Y ocultar de la Tarjeta de Usuario:

/* Ocultar las plataformas de redes sociales de la parte inferior de su tarjeta de usuario */
.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;
}

Pero estos también siguen siendo visibles en el móvil (tanto en el perfil como en la tarjeta)

¿Alguien puede ver qué estoy haciendo mal?

[Arkshine]

Puedo ver tu modificación, pero como el objetivo no es lo suficientemente específico, ha sido sobrescrito por CSS principal.
Puedes verlo cuando inspeccionas el elemento con el navegador, por ejemplo:

Necesitas añadir !important a tus reglas o ser más específico, como por ejemplo:

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

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

Normalmente se recomienda especificar correctamente una regla primero para evitar apuntar a elementos inesperados.

[Richie (Richie Rich)]

@Arkshine

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

Interesante, gracias @Arkshine

Me gustaría mucho apuntar específicamente a los elementos precisos, en lugar de ser general o usar anulaciones de !important.

¿Cómo obtuviste solo estos nombres de elementos específicos:

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

Desde el panel de estilos en el lado derecho:

¿O es que necesito desplazarme más hacia arriba y anotar manualmente los elementos padres?

¿Por qué no necesito agregar .primary .primary-textual

[Arkshine]

@Richie

¿Cómo derivaste solo estos nombres de elementos específicos?

Simplemente copié y pegué lo que hace el núcleo:

Incluso si aplicas la misma regla, el CSS de TC se aplica después del núcleo, así que eso funciona.

Más sobre la especificidad de CSS: Specificity - CSS | MDN.

@Richie

¿O es que necesito desplazarme más arriba y anotar manualmente los elementos padres?

No necesariamente necesitas incluir todos los padres, solo la sección principal, para reducir el alcance de tu objetivo a un punto lo suficientemente específico.

[Richie (Richie Rich)]

@Arkshine

No necesitas incluir necesariamente a todos los padres

Creo que eso es lo que me confundió.

Ahora funciona perfectamente en escritorio y móvil, y está específicamente dirigido en lugar de ser amplio o usar !important.

Gracias de nuevo por la ayuda y la perspectiva

[Richie (Richie Rich)]

Para mayor completitud y en caso de que ayude a alguien más en el futuro.

Este CSS que intenté usar para ocultar algunos campos de usuario personalizados:

/* Ocultar las plataformas de redes sociales de la parte inferior de su página de perfil público */
.instagram, .tik-tok, .facebook, .you-tube, .x-\(twitter\), .vimeo {
    display: none;
}

Tuvo que convertirse en esto para funcionar en escritorio y móvil:

/* Ocultar las plataformas de redes sociales de la parte inferior de su página de perfil */
.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;
}