Timeline integrata di Twitter larghezza 100%

Ho una timeline incorporata su Twitter in esecuzione su questa pagina .

Tramite CSS, ho aggiunto la seguente class:

.twitter-timeline { min-width: 100% !important; 

Fino a ieri, questo CSS stava estendendo con successo la linea del tempo all’intera area del contenuto, ma oggi lo stile non funziona.

Posso vedere che Twitter ha lo stile seguente in esecuzione all’interno dell’iframe:

 .timeline { max-width: 520px; 

Presumo che questo sia qualcosa che Twitter ha aggiunto di recente. C’è qualcosa che posso fare per sovrascrivere questo? Ho provato ad aggiungere quanto segue alla mia class CSS, ma non ha funzionato:

 .twitter-timeline { min-width: 100% !important; width: 100% !important; 

Sono consapevole di poter sfruttare l’API di Twitter per creare un feed personalizzato, ma non abbiamo accesso all’account Twitter degli artisti per generare token di accesso, ecc.

Come accennato, Twitter non consente al widget Timeline di ottenere il 100% di larghezza. Per i siti reattivi questo è un problema ma esiste una soluzione (per ora).

Utilizzare una richiamata sullo script di incorporamento di Twitter e puntarla su una funzione che modifica gli stili iframe.

Soluzione con Jquery

Sostituisci il codice di incorporamento di Twitter (sotto il tag ) con questo.

   

Le rettifiche dovrebbero essere apportate se più di un widget timeline su una pagina.

Potrebbe non funzionare su alcuni vecchi browser IE.

semplice e funziona: $('.twitter-timeline').css({width: '100%'});

Devi usare javascript.

Ecco una soluzione con jQuery:

 $("iframe[id^='twitter-widget-']").contents().find(".timeline").css("maxWidth", "none"); 

Puoi aggiungere un file css esterno nell’iframe di Twitter, lo sfondo dovrebbe diventare blu chiaro con questo esempio.

   

Aggiungi la tua posizione css contenente:

  .timeline{ max-width: 100% !important; } 

Questo ha funzionato per me.

CSS

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

Javascript

 $(window).on('load', function () { $('iframe[id^=twitter-widget-]').each(function () { var head = $(this).contents().find('head'); if (head.length) { head.append(''); } $('#twitter-widget-0').append($('
')); }) });

Trovato questo quando si naviga in internet per la soluzione.

https://wordpress.org/support/topic/how-can-create-full-width-twitter-timeline-on-responsive-page

javascript

 $(document).ready(function() { window.twttr = (function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0], t = window.twttr || {}; if (d.getElementById(id)) return t; js = d.createElement(s); js.id = id; js.src = "https://platform.twitter.com/widgets.js"; fjs.parentNode.insertBefore(js, fjs); t._e = []; t.ready = function(f) { t._e.push(f); }; return t; }(document, "script", "twitter-wjs")); twttr.ready(function(twttr) { $(".tweet").each(function() { twttr.widgets.createTweet($(this).data("id"), $(this)[0], {cards: "hidden"}).then(function(el) { $(el).contents().find('.EmbeddedTweet').css('max-width', '800px'); }); }); }); }); 

html