Forcing an embedded tweet to 100% width

Question

I am trying to force an inline tweet to behave by setting its width to 100%.

I tried to adjust the line width as follows:

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

I also tried to create twitter-tweet style as follows:

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

Both approaches failed. Is it just being rewritten with a twitter script to be included in tweet embed? (The script can be referenced at http://platform.twitter.com/widgets.js .)

Any help in boosting the implementation to 100% width would be greatly appreciated.

Answer 1

Cory, this is not possible if Twitter is turned on. Well, this is possible to some extent, but only up to 520 pixels. See https://dev.twitter.com/docs/embedded-timelines .

However, you can add width = "2000", like this `

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

`Then customize your CSS. This is not the best solution.

there is an old post that may come in handy, I don’t know, it still works, but it's worth a look, check it out at http://kovshenin.com/2012/quick-tip-how-to-make-tweet-embeds-responsive/

Answer 2

Since May 2016, Twitter has been using other embedded HTML. It looks like this. They excluded iFrame integration.

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

In the DOM, you will find an element called #shadow-root after the twitterwidget open tag (contact the Chrome inspector). Now you can manipulate all Twitter Ebends using CSS and the shadow of a pseudo-element.

Example for width:

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

Example - https://jsfiddle.net/86dc9y5t/

Do not use on product pages: - https://developer.mozilla.org/en-US/docs/Web/Web_Components/Shadow_DOM

Answer 3

Just set the width by setting the width of the widget itself.

Check the check in the console, which is the widget container identifier.

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

Answer 4

This solution works for me.

Basically, you need to insert some css into your iframe twitter widget.

In this example, use jQuery

 <style type="text/css" id="twitter-style"> .timeline { max-width: 100%; } </style> <script type="text/javascript"> twttr.widgets.createTimeline( 'WIDGET_ID_GO_HERE', $('#widget-placeholder-go-here')[0], { chrome: 'nofooter noborders noheader' //optional } ).then(function(el) { $(el).contents().find('head').append($('#twitter-style')); }); </script> 

Answer 5

The described shadow solution seems to apply only to Chrome. For other browsers, you can manipulate using javascript. Here is an example with jQuery.

 jQuery(window).load(function () { jQuery('.twitter-tweet').contents().find('.EmbeddedTweet').css({ maxWidth: "960px", width: "100%" }); }); 

Answer 6

For those who wonder why these solutions sometimes do not work; this is because Twitter cards have title and content with white-space:nowrap

But don’t worry, this is the only code you will need to use, because it covers all cases (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;} 

Answer 7

Unfortunately, the above solutions did not help me, they only worked when I requested shadowRoot and was executed with a delay after loading the tweet:

Javascript

 setTimeout((function() { return $('.twitter-tweet').each(function() { return $(this.shadowRoot).find('.EmbeddedTweet').css({ width: '99%', maxWidth: '100%' }); }); }), 2000); 

CoffeeScript

 setTimeout (-> $('.twitter-tweet').each () -> $(this.shadowRoot).find('.EmbeddedTweet').css width: '99%' maxWidth: '100%' ), 2000