Search code examples
javascriptjquerymedia-queries

How to add Media Query in jQuery

This is the jQuery code that I am using in my WordPress website, and it's working fine.

jQuery(document).ready(function($){
$(document).on("click",".selected",function() {
$('.wvg-single-gallery-image-container').css('display','none');
})  
});

I just want the code to stop working at the screen width of 766, on 766 the code does not have to work.

Let me know if there is something that can make this possible.

Thanks, Abdullah

Solution

  • Consider the following.

    jQuery(document).ready(function($){
  $(document).on("click", ".selected", function() {
    if($(window).width() < 766){
      $('.wvg-single-gallery-image-container').hide();
    }
  });
});

    If the document is not very wide, less than 766, the button will perform the action. Otherwise, nothing will happen.

    See More: https://api.jquery.com/width/