How to make embedded Twitter feed responsive in size for smaller screens?

Question

Here is the code generated by Twitter to embed into my web site:

<a class="twitter-timeline" data-width="250" data-height="1000" href="https://twitter.com/Supernova_Style?ref_src=twsrc%5Etfw">Tweets by Supernova_Style</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

I have tried a few different ways in CSS to change the width of the feed but it doesn't work. I would like to keep the twitter feed visible as the screen size is shrunk to mobile size. Does anyone have any ideas on how I can do that?

Answer 1

We've found lately that Twitter's fairly new code generator for embedded profile timelines at publish.twitter.com still creates the issue of the timeline overflowing the container width for iOS devices, particularly with width and height settings (and no data-tweet-limit set).

Currently we're handling this issue via added css (with selector potentially preceeded by your additional specificity, as needed):

.twitter-timeline { width: 100vw !important; }

Answer 2

Wrap it in a container and set the attributes to width: 100%; height:auto; then size your container appropriately. You can then use media queries where necessary.

Example: http://jsfiddle.net/o6qrxyga/1/