Instagram images are too big in mobile view

To use all functions of this page, please register or login.
  • Thank you for the plugin! Your time & trouble to create and maintain it, and provide it free of charge, are much appreciated.

    Images linked via an Instagram URL are not scaled in the browser when viewing on a mobile device.


    I have tried editing the MediaProvider to use width="100%" and that works great except the height is then much too small... but it doesn't seem to understand "100%"... if I use figures instead, I can get perfect height on a phone but much too short on a desktiop, orthe pther way round, but nothing that suits both!

    Is it possible to make it so that it will scale to the exact optimum size like a standard image?

    Cheers :)

  • Hey,

    you can do the following:

    1. Change the RegEx to

    2. Change the HTML-Code to
    <div class="mediaProviderInstagram_beta1"><iframe src="//{$ID}/embed/" frameborder="0" scrolling="no" allowtransparency="true"></iframe></div>

    3. Add this lines to the Style properties

    1. .mediaProviderInstagram_beta1 {
    2. overflow: hidden;
    3. padding-bottom: 80%;
    4. position: relative;
    5. iframe {
    6. height: 100%;
    7. position: absolute;
    8. width: 100%;
    9. }
    10. }

    i would overwrite the provider with the next update to the final version.

    Is this solution OK for you?