CSS-изменения не применяются на мобильных устройствах

[Richie (Richie Rich)]

Мне бы хотелось узнать, не сможет ли кто-нибудь помочь мне с CSS, пожалуйста.

Я следую руководству Making custom CSS changes on your site, и внесённые мной изменения применяются на компьютере, но не на мобильном устройстве.

В этом примере я пытаюсь скрыть поле «Местоположение» на странице профиля пользователя и на карточке профиля пользователя.

Я применил следующий код в разделе CSS > Common:

/* Скрыть местоположение пользователя на его публичной странице профиля */
.user-profile-location {
  display: none;
}
/* Скрыть местоположение пользователя на его карточке профиля */
.user-card .location-and-website .location {
  display: none;
}

При тестировании в Safari и Chrome на ноутбуке под управлением macOS оба элемента скрыты:

При тестировании в Safari и Chrome на iPhone оба элемента всё ещё хорошо видны

Как уже упоминалось выше, это наблюдается в нескольких браузерах.

Аналогично, я также использую этот CSS для скрытия некоторых пользовательских полей на публичной странице профиля:

/* Скрыть платформы социальных сетей из нижней части публичной страницы профиля */
.instagram, .tik-tok, .facebook, .you-tube, .x-\(twitter\), .vimeo {
    display: none;
}

И скрытие на карточке профиля:

/* Скрыть платформы социальных сетей из нижней части карточки профиля */
.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;
}

Но эти элементы также всё ещё видны на мобильном устройстве (как на странице профиля, так и на карточке)

Не может ли кто-нибудь заметить, что я делаю не так?

[Arkshine]

Я вижу ваше изменение, но поскольку селектор недостаточно конкретен, он был перезаписан стилями ядра.
Вы можете убедиться в этом, проверив элемент в браузере, например:

Вам нужно либо добавить !important к вашим правилам, либо сделать селектор более конкретным, например:

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

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

Обычно рекомендуется сначала правильно задать правило, чтобы избежать применения стилей к неожиданным элементам.

[Richie (Richie Rich)]

@Arkshine

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

Интересно, спасибо @Arkshine

Мне бы очень хотелось таргетировать именно эти конкретные элементы, а не действовать широко и/или использовать переопределения через !important.

Как вы пришли к этим конкретным именам элементов:

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

Из панели стилей справа:

Или же мне нужно прокрутить чуть выше и вручную записать родительские элементы?

Почему мне не нужно добавлять .primary .primary-textual

[Arkshine]

@Richie

Как вы пришли именно к этим названиям элементов:

Просто скопировал и вставил то, что делает ядро:

Даже если применить то же правило, TC CSS применяется после ядра, поэтому это работает.

Подробнее о специфичности CSS: Specificity - CSS | MDN.

@Richie

Или мне нужно прокрутить выше и вручную отметить родительские элементы?

Вам не обязательно включать все родительские элементы, достаточно основного раздела, чтобы сузить область применения вашего селектора до достаточно специфичного уровня.

[Richie (Richie Rich)]

@Arkshine

Вам не обязательно включать каждого родителя.

Думаю, именно этот момент меня сбил с толку.

Теперь всё работает идеально на настольных компьютерах и мобильных устройствах, при этом применяется точечно, а не широко и без использования !important.

Ещё раз спасибо за помощь и полезный совет

[Richie (Richie Rich)]

Для полноты информации и на случай, если это поможет кому-то ещё в будущем.

Этот CSS, который я пытался использовать для скрытия некоторых пользовательских полей:

/* Скрыть платформы социальных сетей из нижней части их публичной страницы профиля */
.instagram, .tik-tok, .facebook, .you-tube, .x-\(twitter\), .vimeo {
    display: none;
}

Чтобы это работало на настольных компьютерах и мобильных устройствах, его пришлось изменить следующим образом:

/* Скрыть платформы социальных сетей из нижней части страницы профиля */
.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;
}