Archived topic

Problem with Instagram embed width on mobile

11 replies · Started by Robin on February 25, 2020

Viewing posts 1–12 of 12

February 25, 2020 at 12:57 pm #1176734

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

February 25, 2020 at 3:47 pm #1176837

Hi Robin,

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

February 25, 2020 at 4:00 pm #1176851

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.

February 25, 2020 at 4:26 pm #1176862

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.

February 25, 2020 at 4:37 pm #1176870

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

February 25, 2020 at 4:40 pm #1176872

Can you try the edited code?

Make sure to disable Autopimize as well.

February 25, 2020 at 4:51 pm #1176882

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.

February 25, 2020 at 5:01 pm #1176891

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

Let me know :)

February 25, 2020 at 5:05 pm #1176893

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

February 25, 2020 at 5:05 pm #1176894

Glad I could help :)

September 24, 2020 at 2:32 am #1456578

works

September 24, 2020 at 8:27 am #1457210

Glad to hear :)

This archived topic is closed to new replies.

Start building better websites today.