Popups are great to capture attention and present important content on desktop and tablet sites, but on the smartphone view, they can get in the way.
Various solutions to hide the popup from the mobile view have been shared. For example, Conditional CSS, and Temporary Solution to Hide Popup on Mobile Devices, and Create a Simple Responsive Popup Window with jQuery.
I recently solved my problem with this dilemma by adjusting the css on the popup.css file by adding a media call for a mobile view, and changing the selectors to hide or revise those of the divs in the main css. Though I was not able to simply wrap the code for the popup in a display:none css div, I could isolate my display:none div to wrap only the image, and without the 1. Overlay, 2. Popup and 3. Image css definitions showing on the mobile view, it is now clean and user-friendly.