CSS .timeline width override stopped working June 2015


#1

We embed twitter timeline widgets into various SharePoint sites that require wider than 520px. We used to be able to do this overriding the width element using CSS iframe[id^=‘twitter-widget-’]{ width:100% !important;}. This worked until June 25 when it stopped and used a new max-width:520px that cannot be overridden due to cross-domain restrictions within the iframe.

520 is not wide enough to fill the content area in the SharePoint zone.

Has anyone managed to find a workaround using CSS or jQuery to get the max-width assigned to the inner DIV twitter-widget-0 overridden with none?


#3

Hey,

where you call the twitter widget load:

twttr.widgets.load();

Try adding the blow:

twttr.ready(
function (twttr) {
// bind events here
twttr.events.bind(
‘loaded’,
function (event) {
$(‘iframe[id^=twitter-widget-’).each(function () {
var head = $(this).contents().find(‘head’);
if (head.length) {
head.append(’ < style type=“text/css”>.EmbeddedTweet { max-width: none !important; width: 100% !important; } .SandboxRoot.env-narrow{ font-size: inherit!important;}</ style>’);
}
});
});
}
);

Note: you’llneed to remove the space i’ve put in on the opening of the < style> and closing of the < /style> tags. had to put them in else this forum thinks it’s style code and doesn’t display it.

This will basically uses the twitter widget event listeners to listen for when it is ready, and when loaded add an inline style tag in the head of the embedded iframe which will allow you to override the default CSS.

The above will make it full width of whatever your container div is but you can edit it to add whatever CSS you need within the style tag.

You’ll need to use !important to make sure it overrides the default CSS.


#4

Hi Broadjah

I have the same problem with several responsive Wordpress sites. Up till June 25th my Twitter feeds were full width - now they’ve all shrunk to 520px width.

Bearing in mind that I am a humble designer, not a programmer, please can you explain where to put your code in a responsive wordpress site in layman’s terms

Can you tell me which files I should be putting the code in - and where in the files the code should go?

Thank you in advance


#5

Brilliant solution from Jake90xx:

Go to the post: How can I extend width of Twitter Timeline to 100% page size?

and see Jake90xx’s solution (and my conversion for Wordpress users)


#6

Unfortunately the solution above has stopped working again. No idea why. So - back to square one.

Any ideas anyone???


#7