How to deactivate lightbox function for responsive mode

if you are using image Element for that – just go to advanced tab on the image elmenent and choose as “Image Link”: set manually.
Insert the url of that new image to show in lightbox.
As long this is an image it will open then automatically in the lightbox: https://webers-testseite.de/custom-link-to-lightbox/

easiest way to hamper that lightbox opening would be a media query to set pointer-events to none for that link.

if you like to have more selectivity – then use custom-class on the image element.

@media only screen and (max-width: 899px) {
  a.avia_image.lightbox-added {
    pointer-events: none;
  }
}

for that close button you can shift it f.e. into the image – or to the right side of the image

test:

div.avia-popup .mfp-close {
  right: 5px;
  top: 45px;
  background-color: rgba(0,0,0,0.3);
}