How can I extend width of Twitter Timeline to 100% page size?

NickWingfield · 2015-07-12T14:51:17.124Z

I want to have a Twitter Timeline filling the full width of a responsive WordPress website.

For the last few years I have been able to do this by copying and pasting the Twitter Timeline code from the Twitter widgets settings page directly into my Worpress page and then adding a simple bit of css code in my custom.css file:

#twit iframe {width:150% !important;}

However, since June 2015 that has stopped working and my Twitter Timeline feeds have shrunk back to the default 520px width. I understand this is because Twitter has changed the way their code works.

Any ideas to fix this? I don’t mind if its adding code or using a Wordpress plugin. But ideally I want to put the Twitter Timeline in a page - not a Widget area.

LightBeCorp · 2015-07-21T15:27:52.668Z

I have the same problem in responsive websites. The max-width works fine as expected. However for screens larger than 520px my widget is left justified. The only solutions I have found are using jQuery. The people posting them say the solution works but they have not worked for me.

This is the link I was looking at : https://www.geekgoddess.com/change-twitter-widget-to-wider-than-520px/#comment-281

jake90xx · 2015-07-21T20:43:29.644Z

ive had the same problem for the last couple of days fallowed the link to the geek goddess site and eventually it all made since https://www.geekgoddess.com/change-twitter-widget-to-wider-than-520px/#comment-2811

the code I used to get it working:

iframe[id^='twitter-widget-0'] {
height:600px !important;
margin-bottom:10px !important;
width:100% !important;

}

$(window).on('load', function() {
    $('iframe[id^=twitter-widget-]').each(function () {
        var head = $(this).contents().find('head');
        if (head.length) {
            head.append('<style>.timeline { max-width: 100% !important; width: 100% !important; } .timeline .stream { max-width: none !important; width: 100% !important; }</style>');
    }
        $('#twitter-widget-0').append($('<div class=timeline>'));
    })
});

NickWingfield · 2015-07-22T08:19:39.958Z

Hi jake90xx

Thanks for your reply.

I haven’t tried your solution yet because I’m not sure where to put the code (I’m just a humble designer not a programmer)

Am I right in saying that the first bit of code goes in my custom.css file? But where should I put the second piece of code?

Cheers

NickLWingfield · 2015-08-06T08:55:17.041Z

Hi Jake90xx - or anyone …
Can anyone tell me - in layman’s terms - how to get Twitter Timelines back to 100% width in responsive Wordpress sites?
Any help would be much appreciated!

jake90xx · 2015-08-06T16:52:00.984Z

I have never used wordpress before but hopefully this helps below is a working version of an html page just copy and paste the code into a new html page and you should be able to figure it out from there but if you have any questions im happy to help.

<head>

 <title></title>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 

<style type="text/css">

 iframe[id^='twitter-widget-0'] {

 height:600px !important;

 margin-bottom:10px !important;

 width:100% !important; 

}

</style>

<script type="text/javascript">

 $(window).on('load', function () {

 $('iframe[id^=twitter-widget-]').each(function () {

 var head = $(this).contents().find('head');

 if (head.length) {

 head.append('<style>.timeline { max-width: 100% !important; width: 100% !important; } .timeline .stream { max-width: none !important; width: 100% !important; }</style>');

 }

 $('#twitter-widget-0').append($('<div class=timeline>'));

 })

 });

</script>

</head>

<body>

 <a style="max-width:100%; width:100%;" class="twitter-timeline" href="https://twitter.com/TESOnline" data-widget-id="629295515889328129">Tweets by @TESOnline</a>

</body>

<script>!function (d, s, id) { var js, fjs = d.getElementsByTagName(s)[0], p = /^http:/.test(d.location) ? 'http' : 'https'; if (!d.getElementById(id)) { js = d.createElement(s); js.id = id; js.src = p + "://platform.twitter.com/widgets.js"; fjs.parentNode.insertBefore(js, fjs); } }(document, "script", "twitter-wjs");</script>

NickLWingfield · 2015-08-07T10:07:49.146Z

Hi Jake90xx

It works! Brilliant! Many thanks for your solution.

I’ve been on several other forums trying to find a solution to this vexing question. I will will now revisit them and post your answer and make sure you get the credit you deserve.

For other Wordpress users, here is what I had to do to get your code to work on my responsive Wordpress site:

Create a Twitter Timeline from your Twitter page (Profile - Settings - Widgets - Add New). Copy and paste the code onto your WordPress Page.
On your css style sheet add the following code:

iframe[id^=‘twitter-widget-0’] {

height:600px !important;

margin-bottom:10px !important;

width:100% !important;

}
On your header.php file add the following code after the close of ‘head’:

All of Jake90xx’s code that begins and ends with the word ‘script’: That’s the line after the title and the section after ‘style’. (Sorry I can’t simply show the code but I when I copy and paste it, this forum removes it!)

NickLWingfield · 2015-08-19T13:06:46.145Z

Sorry to say but, for some reason the solution above has stopped working again. No idea why. So - back to square one.

Any ideas anyone???

jake90xx · 2015-08-28T18:25:31.440Z

I finally figured it out you will just have to update the css and one line in the jquery

iframe[id^='twitter-widget-'] { height:700px !important; margin-bottom:10px !important; width:100% !important; max-width:none !important; max-height:none !important; }

$(‘iframe[id^=twitter-widget-]’).each(function () {

Hope this helps

jake90xx · 2015-08-28T18:26:21.804Z

This is the css didn’t post last time for some reason
iframe[id^=‘twitter-widget-’] {
height:700px !important;
margin-bottom:10px !important;
width:100% !important;
max-width:none !important;
max-height:none !important;
}

NickLWingfield · 2015-08-29T11:40:57.078Z

Hi jake90xx

I really appreciate your help but I’m afraid to say that your latest suggestions haven’t worked - at least for me. Perhaps I’m doing something stupid. As I said, I’m not a programmer. Please tell me if I’m doing something wrong?

I took your line of jquery and pasted it in header.php just below the close of the head code.
Then I added your css to my style.css file

Only difference was that I could now change the height of the Twitter Feed by altering

height:700px !important;

The jquery code also displayed on the web page

I’ve tried again with a clean install using WordPress Twenty Thirteen theme - but with same results. Width refuses to shift beyond 520px.

I’m amazed that this issue isn’t being talked about more. Surely there must be lots of folk who want a full width Twitter Timeline?

jake90xx · 2015-09-03T21:39:50.504Z

it sounds like you forgot the script tags around the jquery also if you have ‘twitter-widget-0’ anywhere make sure you change it back to ‘twitter-widget-’ im not sure why that affected it but I couldn’t get it to work until I took the 0 off

niall · 2015-09-03T21:52:04.045Z