title: Magnific Pop-up image too big
body: <p>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:</p>
  
  <pre><code>         &lt;div class="mfp-content"&gt;&lt;div class="mfp-iframe-scaler"&gt;&lt;button title="Close (Esc)" type="button" class="mfp-close"&gt;×&lt;/button&gt;&lt;iframe class="mfp-iframe" src="test.jpg" frameborder="0" allowfullscreen=""&gt;&lt;/iframe&gt;&lt;/div&gt;&lt;/div&gt;
  #document
  &lt;html&gt;&lt;head&gt;&lt;meta name="viewport" content="width=device-width, minimum-scale=0.1"&gt;&lt;title&gt;test.jpg (900×506)&lt;/title&gt;&lt;/head&gt;&lt;body style="margin: 0px;"&gt;&lt;img style="-webkit-user-select: none" src="test.jpg"&gt;&lt;/body&gt;&lt;/html&gt;
  </code></pre>
  
  <p></p>
  
  <p>however the actual source code says:</p>
  
  <pre><code> &lt;div class="attribute-media-wrap"&gt;
                                          &lt;a href="test.jpg" class="vedio_wrap"&gt;
                                              &lt;img src="test.png"&gt;
                                          &lt;/a&gt;
                                          &lt;div class="attribute-media-title-desc"&gt;
  
                                          &lt;/div&gt;
  </code></pre>
  
  <p>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. </p>