Как сделать встроенный канал Twitter отзывчивым по размеру для небольших экранов?

Question

Вот код, сгенерированный Twitter для встраивания в мой веб-сайт:

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

Я пробовал несколько разных способов в CSS изменить ширину канала, но это не работает. Я хотел бы, чтобы канал Twitter был видимым, поскольку размер экрана сокращен до размера мобильного телефона. У кого-нибудь есть идеи, как мне это сделать?

Answer 1

В последнее время мы обнаружили, что довольно новый генератор кода Twitter для встроенных временных шкал профиля на publish.twitter.com все еще создает проблему временной шкалы, переполняющей ширину контейнера для устройств iOS, особенно с шириной и высотой настройки (без ограничения данных-твита).

В настоящее время мы решаем эту проблему с помощью добавленной CSS (с селектором, которому может предшествовать ваша дополнительная специфика, если необходимо):

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

Answer 2

Оберните его в контейнер и установите атрибуты на width: 100%; height:auto;, затем определите размер вашего контейнера соответствующим образом. Затем вы можете использовать медиа-запросы, где это необходимо.

Пример: http://jsfiddle.net/o6qrxyga/1/