Skip to content

Hide or remove a div class at mobile viewport?

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:

 jQuery(document).resize(function () {
  var screen = $(window)    
   if (screen.width < 768) {
     else {

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.



I’m not sure I get this, but are you just trying to toggle a class?

$(window).on('resize', function () {
    $('.class1').toggleClass('class2', $(window).width() < 768);


jQuery has addClass(), removeClass() and toggleClass() methods readily available.

Note that screen is already defined in javascript.

User contributions licensed under: CC BY-SA
3 People found this is helpful