Hide or remove a div class at mobile viewport?

user_2649546 0
Viewed 18273

First and foremost, I am very aware of CSS media queries. My problem is this: When you have div classes stacked in one div; Example:

<div class="class1 class2"></div>

And you want to remove "class2" @media (max-width: 768px) Creating an output of:

<div class="class1"></div>

...once the 768px threshold has been reached.

So far I have come up with nothing other than this non-functional code:

<script>
 jQuery(document).resize(function () {
  var screen = $(window)    
   if (screen.width < 768) {
    $(".class2").hide();
  }
     else {
       $(".class2").show();
      }
  });
</script>

I am really having a hard time finding an answer that works for this. I do not want to block the entire div's contents! Just remove one of two classes.

responsive-design css html jquery javascript
4 Answers

The above solutions dont work for me. I found this one and it works perfect!

https://codepen.io/richerimage/pen/jEXWWG

jQuery(document).ready(function($) {
  var alterClass = function() {
    var ww = document.body.clientWidth;
    if (ww < 600) {
      $('.test').removeClass('blue');
    } else if (ww >= 601) {
      $('.test').addClass('blue');
    };
  };
  $(window).resize(function(){
    alterClass();
  });
  //Fire it when the page first loads:
  alterClass();
});
body {
  font: normal 16px/1.5em sans-serif; 
  color: #111;
}

code {
  background: #ccc;
}

.test {
  background: #fffccc;
  border: solid 3px rgba(0,0,0,0.1);
  margin: 20px;
  padding: 40px 20px;
}

.test.blue {
  background: dodgerBlue;
}

.test.green {
  background: green;
}
<div class="test">
  <h3>Hello World</h3>
  <p>The class of <code>blue</code> is added when I am wider than 600px and is removed when I am 600px or less in width.</p>
</div>

user_150663850
Related