Hiding a <div> in mobile only

Question

I inherited a Drupal site recently that I'm having a bit of trouble with. Essentially, I need to hide a menu in a mobile view, but still remain visible on a desktop. So far, I've added this to my css file:

/* Mobile Hide */
    @media (max-width: 991px) {
        .mobile-only {
          display:none !important;
          }

          .desktop-only {
            display:block !important;
          }
        }

Using Chrome, when I apply the "mobile-only" class to the div I'm trying to disappear, it works perfectly. The only problem is I have no idea how to actually apply this class to the real div in the server's files. How can I apply this to an actual file in Drupal?

Thank you.

Answer 1

You shouldn't need a specific class to complete this. Just assign the div to something like

@media (max-width: 991px) {
    #menu{display: none;}
}

If you need to add the class to the div you can use jquery.

$('div').addClass('mobile-only');