Problem with Instagram embed width on mobile

[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

[Tom]

Hi Robin,

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

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[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.

[Leo]

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.

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

[Robin]

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

[Leo]

Can you try the edited code?

Make sure to disable Autopimize as well.

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

[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.

[Leo]

Edited the code again:
https://generatepress.com/forums/topic/problem-with-instagram-embed-width-on-mobile/#post-1176862

Let me know 🙂

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

[Robin]

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

[Leo]

Glad I could help 🙂

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

[Author]

Posts