Embedded Tweets Width

[Day_]

Over the last couple of days I’ve noticed that embedded tweets are breaking the container on mobile.

Thinking I’ve broken something again but the same issue on this site. 

Not sure if it’s a temporary problem at Twitter’s end or they’ve changed a thingy or two that’s not compatible anymore with IPS code thingy.

 

Just another tweet to throw out as an example in a reply...

 

[Joel R]

Those tweets look ... Fine? 

Some thoughts:

1. You're drunk on holiday eggnog and can't see straight.  No judgement from me.  🙂

2. In the past 45 min, IPS has already fixed the problem at least on their site.  

3. There might be a theme problem on your site? Because the tweets look fine on here.  

[Day_]

1 minute ago, Joel R said:

Those tweets look ... Fine? 

Some thoughts:

1. You're drunk on holiday eggnog and can't see straight.  No judgement from me.  🙂

2. In the past 45 min, IPS has already fixed the problem at least on their site.  

3. There might be a theme problem on your site? Because the tweets look fine on here.  

4. Could be a iPhone XS using Safari issue?

Just downloaded Chrome and same issue

[Jed Rosenzweig]

Yep, mobile safari + Tweet = broken (iPhone 7, so not hardware version specific)

[bfarber]

I've logged a bug report to have this looked into, thanks.

In the future I would recommend if something is not working correctly to submit a ticket rather than post in our feedback forum. There's no real guarantee someone will see and be able to act on the issue when posted on the forums, while it is guaranteed we'll be able to look into any issues if you submit a ticket.

[Day_]

[Jennifer M]

This is a twitter issue, not an IPS issue. Twitter's embed JS is giving the container a width of 500px but then setting a max-width of 100%. iPhones are obeying the 500px but other browsers are obeying the max-width.

Twitter needs to fix it.

I was able to replicate this by embedding a tweet on a standard HTML page outside of IPS and it has the same issue unfortunately. Sorry everyone.

[Day_]

Makes sense as nothing had changed on my site, just started a couple days ago

[Jennifer M]

The fun part is this has been an off and on issue with twitter for a few years now. You'd think they would have learned by now lol.

[33andrain]

Ugh. Happening obv to me as well. Thankful it’s been reported here and that a ticket has been filed with Twitter. Who knows if/when this might be resolved though. Results in a bad user experience. Wonder if there’s anything Invision can do in their CSS to override?

[Demonland31]

This is still happening. I realize it's not an IPS issue and is Twitter's issue but still annoying.

[Jed Rosenzweig]

It would be nice -- generally -- and for situations like this is you can toggle specific embed types (Twitter, FB, YT, etc) on/off.

[Nathan Explosion]

Indeed 😉

 

[Jed Rosenzweig]

Well shut me up!

ETA: Why are so many marketplace screenshots missing/broken?

[Nathan Explosion]

7 hours ago, David T. Cole said:

Well shut me up!

ETA: Why are so many marketplace screenshots missing/broken?

I will be sorting that out for this resource later today. done.

If you spot any more listings in the marketplace where the screenshots are borked, let the developer know - we may not be aware that it has happened.

[Day_]

I know this has been passed off as a Twitter issue, but I was just browsing a forum using Xenforo and embedded Tweets are behaving fine. 🤔

http://www.redcafe.net/threads/leeds-staff-spies-on-derby.444310/

Same tweet embedded on IPS and....

[Day_]

Ok, temporary fix, might not be the best thing in the world to do but I can tell you it works.

In custom.css add

@media(max-width: 667px) 
{ 
#twitter-widget-0 {width: 325px!important;}
}

If a embedded tweet is quoted it does creep outside the block quote box, but not by much. You can reduce the width further if it really bothers you. Better than what it was anyway!

[Day_]

Update, width auto works better 🙂 

#twitter-widget-0 {width: auto!important;}

 

[mwcboard]

31 minutes ago, dayh said:

Update, width auto works better 🙂 

#twitter-widget-0 {width: auto!important;}

 

Thank you!!!!

[PPlanet]

On 1/12/2019 at 4:07 AM, day_ said:

Ok, temporary fix, might not be the best thing in the world to do but I can tell you it works.

In custom.css add

@media(max-width: 667px) 
{ 
#twitter-widget-0 {width: 325px!important;}
}

If a embedded tweet is quoted it does creep outside the block quote box, but not by much. You can reduce the width further if it really bothers you. Better than what it was anyway!

 

On 1/12/2019 at 8:12 AM, day_ said:

Update, width auto works better 🙂 

#twitter-widget-0 {width: auto!important;}

 

I know this topic is old but it's still the solution for the same problem that was happening to me now. So, thank you very much; it fixed it.