Próbuję zmusić osadzone tweet, aby zachowywać się respondly, ustawiając szerokość do 100%.

Próbowałem dostosować inline szerokość w następujący sposób:

<blockquote class="twitter-tweet" width="100%">...</blockquote>

Próbowałem również stylić klasę Twitter-Tweet w następujący sposób:

blockquote.twitter-tweet {width:100% !important}

Oba podejścia nie powiodły się. Czy to po prostu nadpisywane przez skrypt Twitter wymaga dołączenia do Asbed Tweet? (Skrypt można odwołać się w http://platform.twitter.com/widatgets.js. )

Wszelkie pomoc w wymuszaniu osiedla do 100% szerokości byłaby bardzo doceniana.

7
user918522 13 sierpień 2014, 03:50

5 odpowiedzi

Najlepsza odpowiedź

Cory, nie jest to możliwe przy użyciu podanego Twittera. Cóż, możliwe jest w pewnym stopniu, ale tylko do 520px. Zobacz https://dev.twitter.com/docs/embedded-timelines.

Jednak możesz dodać szerokość = "2000" jak ten `

<a class="twitter-timeline" width="2000" href="https://twitter.com/twitterapi" data-widget-id="YOUR-WIDGET-ID-HERE">Tweets by @twitterapi</a>

`, A następnie dostosuj CSS. Jednak nie jest to najlepsze rozwiązanie.

Jest stary post, który może być dla Ciebie użytkowania, nie wiem, czy nadal działa, ale warto zobaczyć, sprawdź to w http://kovshenin.com/2012/quick-tip-how-to-make-tweet-embeds-responsive/

2
Devin 13 sierpień 2014, 00:02

Od maja 2016 Twitter używa innego Embed HTML. To wygląda tak. Upuszczali integrację iframe.

<twitterwidget class="twitter-tweet twitter-tweet-rendered" id="twitter-widget-1"
               style="position: static; visibility: visible; display: block; max-width: 100%; width: 500px; min-width: 220px; margin-top: 10px; margin-bottom: 10px;"
               data-tweet-id="732567624345915393">
    <div data-twitter-event-id="1" class="SandboxRoot env-bp-350" style="position: relative;"> 
        ...
    </div>
</twitterwidget>

W Domu znajdziesz element o nazwie #shadow-root po otwartym znaczniku twitterwidget (sprawdź w Chrome Inspector ). Od teraz możliwe jest manipulowanie wszystkimi firmami na Twitterze CSS i pseudo cienia elementu.

Przykład szerokości:

twitterwidget::shadow .EmbeddedTweet {
    width: 700px;
    max-width: 960px;
}

Przykład - https://jsfiddle.net/86dc9y5t/

Nie używaj na stronach produktów: - https://developer.mozilla.org/en-us/docs/ Web / Web_Components / Shadow_dom

8
scurrilus 17 maj 2016, 18:08

Po prostu ustaw szerokość ustawiającą szerokość samego widżetu.

Sprawdź sprawdzanie w konsoli, jaki jest identyfikator kontenera widżetu.

#twitter-widget-0{ width:100%; }
2
Alessandro Incarnati 13 sierpień 2014, 00:01

Opisane rozwiązanie z cieniem wydaje się stosować tylko do chromu. W przypadku innych przeglądarek jest możliwy do manipultu w JavaScript. Oto przykład z jQuery.

jQuery(window).load(function () {
    jQuery('.twitter-tweet').contents().find('.EmbeddedTweet').css({
            maxWidth: "960px", width: "100%"
    });
});
1
scurrilus 18 maj 2016, 09:59

Dla każdego, kto zastanawia się, dlaczego te rozwiązania czasami nie działają; To dlatego, że karty Twittera ma tytuł i treści z white-space:nowrap

Ale nie martw się, jest to jedyny kod, którego będziesz musiał użyć, ponieważ obejmuje wszystkie przypadki (ATM):

#twitter-widget-0,#twitter-widget-1{ width:100%; }

twitterwidget::shadow .SummaryCard-content *{white-space:normal !important;}

twitterwidget::shadow .resize-sensor{display:none !important;width:0px !important;overflow:hidden !important;}
0
modu 12 grudzień 2016, 20:49