Remove .class on mobile view

Question

FOUNDATION FRAMEWORK Q:

Question - is there anyway to remove a .class on an element when site is shown on mobile or tablet device? (i.e. anything below 768px?)

I could easily remove this with a few lines of js. But want my code to be properly formatted. So if there's a way to do it within the foundation framework, I'd prefer to go that route.

Help? I know this is not necessarily a code question..but it sort of is. Hoping someone could enlighten me and point the way - if there is one.

Answer 1

Use a browserdetect script (http://www.quirksmode.org/js/detect.html) to find out which version and browser you have (i.e. mobile safari) and then use jquery to remove the class from the elements.

However, considering the fact that you are mentioning a class and below 768px I would suggest you to look into the media queries of css: http://css-tricks.com/css-media-queries/

EDIT:

turn your logic the other way around and use:

@media screen and (min-width: 768px) {
  .class {
    background: #ccc;
  }
}