# CSS edits not being applied on mobile

**URL:** https://meta.discourse.org/t/css-edits-not-being-applied-on-mobile/353986
**Category:** Support
**Tags:** css
**Created:** [February 23, 2025, 6:58pm UTC](https://meta.discourse.org/t/css-edits-not-being-applied-on-mobile/353986 "2025-02-23T18:58:32Z")
**Posts on this page:** 7
**Page:** 1

<div class="post-metadata">

### Author: ![Richie](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/richie/32/115110_2.png) [@Richie](https://meta.discourse.org/u/Richie)
#### Post date: [February 23, 2025, 6:58pm UTC](https://meta.discourse.org/t/css-edits-not-being-applied-on-mobile/353986/1 "2025-02-23T18:58:32Z")

</div>

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

I’ve been following the [Making custom CSS changes on your site](https://meta.discourse.org/t/making-custom-css-changes-on-your-site/168101) 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`:

```plaintext
/* 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](https://global.discourse-cdn.com/meta/original/4X/9/6/4/96481f013dcd98b419e90e5e4315f69dd3f0827b.jpeg)

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

 ![IMG_2192.PNG](https://global.discourse-cdn.com/meta/original/4X/0/4/9/049c62e11696023f413001292ea30d8783e10047.jpeg)

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:

```plaintext

/* 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:

```plaintext
/* 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? 🤷

---

<div class="post-metadata">

### Author: ![Arkshine](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/arkshine/32/298682_2.png) [@Arkshine](https://meta.discourse.org/u/Arkshine)
#### Post date: [February 23, 2025, 7:32pm UTC](https://meta.discourse.org/t/css-edits-not-being-applied-on-mobile/353986/3 "2025-02-23T19:32:22Z")

</div>

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)](https://global.discourse-cdn.com/meta/original/4X/1/8/9/18912a01499b4f1704117ef8263ddc20cd14cfd2.png)

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

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

```

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

```

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

---

<div class="post-metadata">

### Author: ![Richie](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/richie/32/115110_2.png) [@Richie](https://meta.discourse.org/u/Richie)
#### Post date: [February 23, 2025, 8:10pm UTC](https://meta.discourse.org/t/css-edits-not-being-applied-on-mobile/353986/4 "2025-02-23T20:10:58Z")

</div>

> [@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:

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

```

From the styles panel on the right hand side:

 ![Screenshot 2025-02-23 at 20.04.32](https://global.discourse-cdn.com/meta/original/4X/a/9/4/a94d12190128604cd754071029aad71de2040f30.jpeg)

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` 🤔

 ![Screenshot 2025-02-23 at 20.06.15](https://global.discourse-cdn.com/meta/original/4X/6/2/6/626ceee254f91a1f9baca69e14857aeeeb21675c.png)

---

<div class="post-metadata">

### Author: ![Arkshine](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/arkshine/32/298682_2.png) [@Arkshine](https://meta.discourse.org/u/Arkshine)
#### Post date: [February 23, 2025, 8:23pm UTC](https://meta.discourse.org/t/css-edits-not-being-applied-on-mobile/353986/5 "2025-02-23T20:23:16Z")

</div>

> [@Richie](#):
>
> How did you derive just these specific element names:

Just copied and paste what the core does:

 ![image](https://global.discourse-cdn.com/meta/original/4X/6/d/d/6dd434986faa61c8ec5af13dc7dd424d4030bcdb.png)

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

More about CSS specificity: [Specificity - CSS | MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_cascade/Specificity).

> [@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.

---

<div class="post-metadata">

### Author: ![Richie](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/richie/32/115110_2.png) [@Richie](https://meta.discourse.org/u/Richie)
#### Post date: [February 23, 2025, 8:38pm UTC](https://meta.discourse.org/t/css-edits-not-being-applied-on-mobile/353986/6 "2025-02-23T20:38:39Z")

</div>

> [@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 🙇‍♂️

---

<div class="post-metadata">

### Author: ![Richie](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/richie/32/115110_2.png) [@Richie](https://meta.discourse.org/u/Richie)
#### Post date: [February 23, 2025, 8:42pm UTC](https://meta.discourse.org/t/css-edits-not-being-applied-on-mobile/353986/7 "2025-02-23T20:42:35Z")

</div>

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:

```plaintext
/* 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:

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

```

---

<div class="post-metadata">

### Author: ![system](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/system/32/443519_2.png) [@system](https://meta.discourse.org/u/system)
#### Post date: [March 25, 2025, 8:43pm UTC](https://meta.discourse.org/t/css-edits-not-being-applied-on-mobile/353986/8 "2025-03-25T20:43:02Z")

</div>

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.
