Fixed Instagram embed code not responsive. How to fix?

G

gorman

Member
Unless I'm missing something, the Instagram bbcode uses oEmbed, leading to non responsive embedding, that goes out of borders when watched from a portrait mobile solution. How can I make it responsive?

Thank you!
 
Yup, confirmed here as well. It's not my style messing it up.

It has a max-width: 658px attribute that doesn't scale in any way according to screen size.
 
On a slightly related note (embed function), I see that embedly always sends to forums a transparent background for reddit embeds (don't know about other embeds, I notice only for reddit). And it's pretty much impossible to style, becase embedly css arrives "after" the forum css is loaded, not even !important seems to work.
Am I missing something? Because it's not a problem if you have a white background but if you have a dark background... not so much.

Edit: I see this happening with many styles on sale in the Resources section too. Should I open a bug specifically for this?

To view this content we will need your consent to set third party cookies.
For more detailed information, see our cookies page.

1527009426264.webp
 
Last edited:
Hi,

I don't know Xenforo very well, but just add the CSS anywhere, maybe in the templates, there is a template for personal modifications ?
You just have to add :
CSS: 
iframe.embedly-card {
    background: yourcolor or rgb(XXX, XXX, XXX);
}

Instagram have its own background. For Facebook : .fb_iframe_widget. I don't know about the others embed media, sorry.
 
@Rubidium, you are a star! I hope these will be fixed for everybody in the future but, in the meantime, THANK YOU!

Edit: before asking for extra help I did everything correctly (put it in extra.less template) but used .iframe.embedly-card for whatever reason, that's why it wasn't working, I guess.
 
Do we need the margin to be auto on this?

On large screens it looks weird because the oembed is centred away from from the rest of the content, unlike other embeds like YouTube videos and images which alight left.

If it's removed to inherit the margin: 0 from .bbMediaWrapper and Justifier it falls back to the left and flows better with the rest of the content. Still seems to be responsive though.

I also encountered the transparency issue and had to manually add some extra css. A style property for the .bbOembed block might be worth a thought.

I can make a separate bug report/suggestion if need be.
 
Back
Top Bottom