Hiding Elements on Template (CSS)

Front End Help
#1

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

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

please help, I greatly appreciate it.

#2

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.

.top-bar-socials {
  display: none !important;
}
#3

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

#4

It needs to go inside a media query.

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

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