I'm having some trouble with a content that I had someone build for me on wordpress. Of course they took their money and ran so I can't quite figure out what is happening. On desktop, it seems to be fine, however on mobile, this Magnific Popup isn't working right. It displays the image at it's full width instead of being responsive to the screen size. I don't want to make the image itself smaller because then it will be small on desktop. This is the code I have for it when I inspect it on chrome:
<div class="mfp-content"><div class="mfp-iframe-scaler"><button title="Close (Esc)" type="button" class="mfp-close">×</button><iframe class="mfp-iframe" src="test.jpg" frameborder="0" allowfullscreen=""></iframe></div></div>
#document
<html><head><meta name="viewport" content="width=device-width, minimum-scale=0.1"><title>test.jpg (900×506)</title></head><body style="margin: 0px;"><img style="-webkit-user-select: none" src="test.jpg"></body></html>
however the actual source code says:
<div class="attribute-media-wrap">
<a href="test.jpg" class="vedio_wrap">
<img src="test.png">
</a>
<div class="attribute-media-title-desc">
</div>
I have tried multiple ways to try and call out that image but I can't add a class to it since I can't edit that code.
The content of the popup is an iframe.
The markup for this popup is most likely set in your main javascript file. See an example of this implementation in the magnific popup documentation.
To style this in css you would need to target the iframe itself, not the contents of the iframe. i.e:
.mfp-iframe {max-width: 100%;}