[Resolved] Problem with Instagram embed width on mobile

Home Forums Support [Resolved] Problem with Instagram embed width on mobile

Home Forums Support Problem with Instagram embed width on mobile

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #1176734
    Robin

    Hi!

    Thanks for all that you do, I really love this theme!

    I just have one small problem. When I embed an image or video from Instagram it shows up fine on the desktop, but not on mobile. The left side of the embed is fine, it lines up perfectly with the text and everything else, but on the right side the embed extends too far, it extends all the way to the edge of the screen. I don’t have this problem with YouTube or Twitter embeds. What can I do to fix it?

    Thanks in advance!
    Robin

    #1176837
    Tom
    Lead Developer
    Lead Developer

    Hi Robin,

    Sounds like an issue with iframes, maybe. Any chance you can link us to the site?

    #1176851
    Robin

    Sure! This is one of the articles on the site with two Instagram embeds: https://aretheyvegan.com/rihanna/

    The article also contains YouTube and Twitter embeds, but they appear just fine.

    #1176862
    Leo
    Staff
    Customer Support

    Can you try adding this CSS?

    iframe.instagram-media.instagram-media-rendered {
        width: auto !important;
        min-width: unset !important;
    }

    Adding CSS: https://docs.generatepress.com/article/adding-css/

    Make sure to clear your caching plugin and disable it for now if it doesn’t work.

    #1176870
    Robin

    That didn’t work, unfortunately. I’ve disabled the caching plugin.

    #1176872
    Leo
    Staff
    Customer Support

    Can you try the edited code?

    Make sure to disable Autopimize as well.

    #1176882
    Robin

    We’re getting somewhere! It worked for one of the two embeds, but not the other. The one it worked for is an Instagram post from 2013, so probably a low resolution image, I don’t know if that’s relevant.

    I’ve disabled Autoptimize as well.

    #1176891
    Leo
    Staff
    Customer Support
    #1176893
    Robin

    It worked! Both are exactly as they should be now. Thank you so much!

    #1176894
    Leo
    Staff
    Customer Support

    Glad I could help πŸ™‚

    #1456578
    Giordano

    works

    #1457210
    Leo
    Staff
    Customer Support

    Glad to hear πŸ™‚

Viewing 12 posts - 1 through 12 (of 12 total)
  • You must be logged in to reply to this topic.