Embedded timeline video image breaking out on mobile


#1

Hi there. I’ve embedded a standard twitter timeline onto a website I’m building. All looks fine on desktop browsers but when on mobile the video image on the current Tweet is breaking out of the width of its container and messing up the whole sites layout (iPhone at least anyway). Why is this happening?!

The attached image should make things clearer - basically this in on a bootstrap grid so the columns should be filling the full width of the screen but the twitter image has broken out and therefore forcing the width of everything to be smaller.

Help?!


#2

Hi there! Can you post the embed code you are using so that I can try and reproduce this?

Cheers,
Kat


#3

Sure, even better, I’ve created a live page - I did this on a blank document to make sure there wasnt anything in the website that was causing it.

http://79.170.44.97/jwa-test.co.uk/twittest.html

The very odd thing is the widget ‘grows’ in an animated fashion when it loads on to screen (on iPhone, not been able to test on Android). Looks fine on desktop browsers. Here’s what I see on the iPhone:


#4

Hi there! I’m working on a long-term solution but in the meantime please add a ‘data-width’ param to your embed code (https://developer.twitter.com/en/docs/twitter-for-websites/timelines/guides/parameter-reference). Let me know if that fix doesn’t work for you.

Cheers,
Kat