# Hiding Elements on Template (CSS)

**URL:** <https://forum.freecodecamp.org/t/hiding-elements-on-template-css/404909>\
**Category:** General\
**Created:** [June 17, 2020, 4:15pm UTC](https://forum.freecodecamp.org/t/hiding-elements-on-template-css/404909 "2020-06-17T16:15:44Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![rgustavo](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/rgustavo/32/154660_2.png) [@rgustavo](https://forum.freecodecamp.org/u/rgustavo)\
**Post date:** [June 17, 2020, 4:15pm UTC](https://forum.freecodecamp.org/t/hiding-elements-on-template-css/404909/1 "2020-06-17T16:15:44Z")

</div>

been working on customizing a template and been having a hard time hiding an element.

On the **mobile version** , I need to hide the social icons for the top bar.

[http://2020.adwavesigns.com](http://2020.adwavesigns.com)  
**Div Class: top-bar-socials**

the template uses a custom CSS section to modify without going into the actual CSS. I tried using the following without any success:

```auto
.top-bar-socials {
    display:none;
}

```

please help, I greatly appreciate it.

---

<div class="post-metadata">

**Author:** ![lasjorg](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/lasjorg/32/280761_2.png) [@lasjorg](https://forum.freecodecamp.org/u/lasjorg)\
**Post date:** [June 17, 2020, 4:34pm UTC](https://forum.freecodecamp.org/t/hiding-elements-on-template-css/404909/2 "2020-06-17T16:34:52Z")

</div>

Likely a specificity or cascade issue.

You can use `!important` to overwrite any other styles. It’s not an ideal solution but not uncommon either when doing Wordpress customization.

```auto
.top-bar-socials {
  display: none !important;
}

```

---

<div class="post-metadata">

**Author:** ![rgustavo](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/rgustavo/32/154660_2.png) [@rgustavo](https://forum.freecodecamp.org/u/rgustavo)\
**Post date:** [June 17, 2020, 4:36pm UTC](https://forum.freecodecamp.org/t/hiding-elements-on-template-css/404909/3 "2020-06-17T16:36:19Z")

</div>

thanks! what would be the coding to only affect in mobile?

---

<div class="post-metadata">

**Author:** ![lasjorg](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/lasjorg/32/280761_2.png) [@lasjorg](https://forum.freecodecamp.org/u/lasjorg)\
**Post date:** [June 17, 2020, 4:45pm UTC](https://forum.freecodecamp.org/t/hiding-elements-on-template-css/404909/4 "2020-06-17T16:45:14Z")

</div>

It needs to go inside a [media query](https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries).

You have a media query at `991px` so that might do. Or use whatever px value for the `max-width` you think would work.

```auto
@media only screen and (max-width: 991px) {
  .top-bar-socials {
    display: none !important;
  }
}

```

---

<div class="post-metadata">

**Author:** ![ILM](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/ilm/32/363239_2.png) [@ILM](https://forum.freecodecamp.org/u/ILM)\
**Post date:** [June 1, 2021, 6:49pm UTC](https://forum.freecodecamp.org/t/hiding-elements-on-template-css/404909/5 "2021-06-01T18:49:45Z")

</div>