How can I create FULL WIDTH Twitter Timeline on responsive site?

Hello, hello, hello …. (I can hear my voice echoing in the darkness)
Is there anyone out there?
Surely I can’t be the only one on the planet looking for a new solution to get full width Twitter Timelines on responsive WordPress sites?
Doesn’t anyone have an answer?
We can’t let the faceless techocrats at Twitter do this to us!
I live in hope ….

Here is a brilliant solution provided Jake90xx from the Twitter Forum:

https://twittercommunity.com/t/how-can-i-extend-width-of-twitter-timeline-to-100-page-size/46101/6

Here is my interpretation for WordPress Users:

1. Create a Twitter Timeline from your Twitter page (Profile – Settings – Widgets – Add New). Copy and paste the code onto your WordPress Page.

2. On your css style sheet add the following code:

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

     height:600px !important;

     margin-bottom:10px !important;

     width:100% !important; 

    }

3. On your header.php file add the following code under </head> (ignore single quote marks at start and finish):

` <script src=”https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js”></script&gt;

<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>`

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???

I have tried your JavaScript solution and it works!

But we must know when the Twitter Widget has fully loaded.
I suggest to use “setInterval” to check periodically and patch the iframe-timeline using your JavaScript code. Don’t forget to remove “setInterval” after your hack code already triggered.

Below is my code

var interval=null;
var patched=false;

function patchTimeline(){
	interval= setInterval(function(){
		var windowWidth=jQuery(window).width();

		if((windowWidth >= 768) && (windowWidth <= 1024)){
			if(patched===false){
				if(jQuery('#tweets iframe.twitter-timeline').length > 0){
					var head = $('#tweets iframe.twitter-timeline').contents().find('head');

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

					patched=true;
				}
			}else{
				removeInterval();
			}
		}else{
			removeInterval();
		}
	},3000); // do this interval for every 3 seconds
}

function removeInterval(){
	interval=null;
}

jQuery(document).ready(function(){
	patchTimeline();
});