CSS edits not being applied on mobile

Product Support

AI-generated summary

Richie encountered an issue where CSS changes were not applying on mobile devices, despite working on desktop. The problem was that the CSS rules were being overridden by core styles due to insufficient specificity. Arkshine explained that using !important or more specific selectors, such as .user-main .about .details .user-profile-location, resolves the issue. Richie learned to inspect the element and copy the exact class hierarchy from the browser’s developer tools to create targeted CSS rules. This approach ensured the changes worked consistently across both desktop and mobile. Richie shared the final working CSS for hiding custom user fields, emphasizing the importance of specificity over broad rules or !important. Richie, Arkshine, Richie, Richie, Richie

1

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:

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

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

IMG_2192.PNG
IMG_2192.PNG960×2079 118 KB

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) :thinking:

Can anyone spot what I’m doing wrong? :person_shrugging:

3

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.:

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

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.

4

Interesting, thanks @Arkshine :smiley:

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:

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

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 :thinking:

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

5

Just copied and paste what the core does:

image
image603×118 3.69 KB

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

More about CSS specificity: Specificity - CSS | MDN.

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.

6

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 :bowing_man:

7

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