[Resolved] Removing (not hiding) classes from an element based on screen size

[Max]

Hi Tom et al

I need to remove two CSS classes from a html element based on screensize (media break points).

Note: I am not after display:none:

I want the classes removed not hidden.

Can this be done with CSS?

If not is there a script snippet I can run in my footer hook.

Thanks for your assistance.

Kind Regards

Max

[Tom]

Hey Max,

I suppose you could use jQuery. This might be helpful: https://stackoverflow.com/questions/11047514/jquery-add-remove-class-when-window-width-changes

[Max]

I tried the following:

(function($) {
    var $window = $(window),
        $html = $('html');

    function resize() {
        if ($window.width() < 514) {
            return $html.addClass('mobile');
        }

        $html.removeClass('mobile');
    }

    $window
        .resize(resize)
        .trigger('resize');
})(jQuery);

However I get the following error:

Syntax Error Expecting T_VARIABLE

[Tom]

Can you link me to the page?

[Max]

I am using a lightbox plugin that injects a class into links for images. Works great.

Problem is I don’t want a light box for the images on tablet or mobile view.

To the best of my knowledge, @media settings are no help here?

I tried some wild ideas like all:revert but none of them worked.

Plugin author hasn’t answered my two week old support topic.

What to do?

[Tom]

That javascript above is the right idea. It just needs to be tweaked to remove the correct classes.

[Max]

I want to put the javascript in the functions.php file in my child theme.

The plugin adds the following (2) classes to the html for a link:

<a href="https://mywebsite.com" class="venobox vbox-item">

I can’t get the snippet above to work.

What should the javascript look like?

[Tom]

So in order to do this we would need to loop through each link on the page looking for that class.

In addition to that, we would need to run that loop continuously when resizing the page.

Performance-wise, this is a nightmare that I 100% wouldn’t do.

Unfortunately I don’t really have a solution for this off the top of my head.

[Max]

The plugin has an option to turn off the “auto” add the classes to image links.

You can then add the classes manually in your html.

If I add the classes manually when I create a page, is there way to modify what screen size they will work on.

Thanks.

[Max]

$(document).ready(function() {
  if (screen.width < 1024) {
    $('#some-id').unbind('click');
  }
});

Will this work?

https://stackoverflow.com/questions/14055352/disable-lightbox-in-responsive-design

[Tom]

It could:

jQuery(document).ready(function($) {
  if (screen.width < 1024) {
    $('.venobox').unbind('click');
  }
});

You could also just try this:

@media (max-width: 768px) {
    .venobox {
        pointer-events: none;
    }
}

[Max]

Thanks very much Tom.

Pointer-events is a good low fat solution.

How come no one mentioned it in all the stack and other articles I searched through?

[Tom]

Not sure – it’s not the greatest solution, but it works if you’re just trying to prevent clicks 🙂

[Max]

“It works” is good enough for me.

Thanks very much for your help.

[Tom]

No problem 🙂

[Author]

Posts