CSS edits not being applied on mobile

[Richie (Richie Rich)]

I’m wondering if someone could help me with some CSS please.

I’ve been following the Making custom CSS changes on your site guide and the changes I make are taking effect on desktop, but not on mobile.

In this example, I’m trying to hide the Location from the user profile page and from the user profile card.

I’ve applied the following in CSS > Common:

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

Testing on Safari and Chrome on macOS laptop, both are hidden:

Testing on Safari and Chrome on iPhone and both are still very visible

As mentioned above, this is the case on multiple browsers.

Similarly, I also use this CSS to hide some Custom User Fields from their public profile:

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

And hiding from the User Card:

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

But these are also still visible on mobile (on both the profile and the card)

Can anyone spot what I’m doing wrong?

[Arkshine]

I can see your modification, but because the target it’s not enough specific, it’s been overwritten by core CSS.
You can see it when you inspect the element with the browser, e.g.:

You need to either add !important to your rules or be more specific like for example:

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

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

It’s usually recommended to properly specify a rule first to avoid targeting unexpected elements.

[Richie (Richie Rich)]

@Arkshine

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

Interesting, thanks @Arkshine

I would very much like to specifically target the precise elements, rather than being broad and/or using !important overrides.

How did you derive just these specific element names:

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

From the styles panel on the right hand side:

Or is it the case that I need to scroll further up and manually note the parent elements?

Why do I not need to add .primary .primary-textual

[Arkshine]

@Richie

How did you derive just these specific element names:

Just copied and paste what the core does:

Even if you apply the same rule, TC CSS is applied after core, so that works.

More about CSS specificity: Specificity - CSS: Cascading Style Sheets | MDN.

@Richie

Or is it the case that I need to scroll further up and manually note the parent elements?

You don’t necessarily need to include every parent, just the main section, to reduce the scope of your target to a point that’s specific enough.

[Richie (Richie Rich)]

@Arkshine

You don’t necessarily need to include every parent

I think that’s the bit that threw me.

It’s working perfectly across desktop and mobile now, and specifically targeted instead of being broad or using !important.

Thanks again for the help and the insight

[Richie (Richie Rich)]

For completeness and in case it helps someone else in the future.

This CSS that I tried to use to hide some custom user fields:

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

Needed to become this to work across desktop and mobile:

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