jquery - Making a DIV hide if viewport drops below set width -

I have been working / searching for this specific idea for some time, but I can not find a solution

Actually I'm working with a WordPress plugin where a part of the content is shown, and it works fine except for mobile devices.

I am trying to fix it when the viewport hits a certain width and hides the div.

This is what I have done:

  & lt; Script & gt; JQuery (document) .ready (function) {var screen = $ (window) if (screen.width () <800) {$ ("# caregrabber"). Hide ();} else {$ ("# AttentionGrabber "). Show ();}}); & Lt; / Script & gt;   
 It is assuming that #attentionGrabber is the Diva which I am trying to control.  
 I think that is the easiest way to show or hide it on the viewport basis, but it does not look like when I put that code on top.   
 
 
 If you have some events so that the size of the screen is changed, then your function will continue.  
  & lt; Script & gt; JQuery (document). Reset (function () (var screen = $ (window) if (screen.width () & lt; 800) {$ ("# caregrabber"). Hide ();} else {$ ("# attentionGrabber"). ();}}); & Lt; / script & gt; Actually, however, I go this route:  
  @ media screen and (max-width: 799px) {#attentionGrabber {display: none}}