Edições de CSS não sendo aplicadas no celular

[Richie (Richie Rich)]

Gostaria de saber se alguém poderia me ajudar com um pouco de CSS, por favor.

Tenho seguido o guia Making custom CSS changes on your site e as alterações que faço estão tendo efeito no desktop, mas não no mobile.

Neste exemplo, estou tentando ocultar a Localização da página de perfil do usuário e do cartão de perfil do usuário.

Apliquei o seguinte em CSS > Comum:

/* Oculta a Localização do Usuário de sua página de perfil pública */
.user-profile-location {
  display: none;
}
/* Oculta a Localização do Usuário de seu cartão de usuário */
.user-card .location-and-website .location {
  display: none;
}

Testando no Safari e Chrome em um laptop macOS, ambos estão ocultos:

Testando no Safari e Chrome no iPhone e ambos ainda estão muito visíveis

Como mencionado acima, este é o caso em vários navegadores.

Da mesma forma, também uso este CSS para ocultar alguns Campos Personalizados de Usuário de seu perfil público:

/* Oculta as plataformas de mídia social da parte inferior de sua página de perfil pública */
.instagram, .tik-tok, .facebook, .you-tube, .x-\(twitter\), .vimeo {
    display: none;
}

E ocultando do Cartão de Usuário:

/* Oculta as plataformas de mídia social da parte inferior de seu cartão de usuário */
.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;
}

Mas estes também ainda estão visíveis no mobile (tanto no perfil quanto no cartão)

Alguém consegue identificar o que estou fazendo de errado?

[Arkshine]

Consigo ver sua modificação, mas como o alvo não é específico o suficiente, ele foi substituído pelo CSS principal.
Você pode ver isso quando inspeciona o elemento com o navegador, por exemplo:

Você precisa adicionar !important às suas regras ou ser mais específico, como por exemplo:

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

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

Geralmente, é recomendado especificar corretamente uma regra primeiro para evitar atingir elementos inesperados.

[Richie (Richie Rich)]

@Arkshine

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

Interessante, obrigado @Arkshine

Eu gostaria muito de segmentar especificamente os elementos precisos, em vez de ser amplo e/ou usar substituições !important.

Como você derivou apenas esses nomes de elementos específicos:

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

Do painel de estilos no lado direito:

Ou é o caso de eu precisar rolar mais para cima e anotar manualmente os elementos pais?

Por que não preciso adicionar .primary .primary-textual

[Arkshine]

@Richie

Como você derivou apenas esses nomes de elementos específicos:

Apenas copiei e colei o que o core faz:

Mesmo que você aplique a mesma regra, o CSS do TC é aplicado após o core, então isso funciona.

Mais sobre especificidade CSS: Specificity - CSS | MDN.

@Richie

Ou é o caso de eu precisar rolar mais para cima e anotar manualmente os elementos pais?

Você não precisa necessariamente incluir todos os pais, apenas a seção principal, para reduzir o escopo do seu alvo a um ponto específico o suficiente.

[Richie (Richie Rich)]

@Arkshine

Você não precisa necessariamente incluir todos os pais

Acho que foi essa parte que me confundiu.

Está funcionando perfeitamente em desktop e mobile agora, e especificamente direcionado em vez de ser amplo ou usar !important.

Obrigado novamente pela ajuda e pela visão

[Richie (Richie Rich)]

Para fins de completude e caso ajude outra pessoa no futuro.

Este CSS que tentei usar para ocultar alguns campos de usuário personalizados:

/* Ocultar as plataformas de mídia social da parte inferior da página de perfil público deles */
.instagram, .tik-tok, .facebook, .you-tube, .x-\(twitter\), .vimeo {
    display: none;
}

Precisou se tornar isto para funcionar em desktop e mobile:

/* Ocultar as plataformas de mídia social da parte inferior da página de perfil deles */
.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;
}