This is really easy with some built in XenForo CSS classes. When editing your notification:

Select advanced custom style and add the above CSS class.
That will hide when the device width is below 480px. You can, of course, change that responsiveNarrowWidth value in Style Properties if you would prefer it to be 500px.
Or, of course, there's nothing to stop you from assigning your own class that is set to display: none when the media query sees a device below 500 (I am just recommending the default class for simplicity).
You can add more than one CSS class in that field, so you may also want to add some custom CSS to style the notifications accordingly.

Select advanced custom style and add the above CSS class.
That will hide when the device width is below 480px. You can, of course, change that responsiveNarrowWidth value in Style Properties if you would prefer it to be 500px.
Or, of course, there's nothing to stop you from assigning your own class that is set to display: none when the media query sees a device below 500 (I am just recommending the default class for simplicity).
You can add more than one CSS class in that field, so you may also want to add some custom CSS to style the notifications accordingly.