如何使嵌入式Twitter feed在较小的屏幕上响应大小?

时间:2018-07-06 03:48:52

标签: html css twitter feed

这是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中尝试了几种不同的方式来更改Feed的宽度,但是它不起作用。我希望保持Twitter提要可见,因为屏幕尺寸缩小到了移动尺寸。有人对我该怎么做有任何想法吗?

2 个答案:

答案 0 :(得分:1)

将其包装在容器中,并将属性设置为width: 100%; height:auto;,然后适当调整容器的大小。然后,您可以在必要时使用媒体查询。

示例:http://jsfiddle.net/o6qrxyga/1/

答案 1 :(得分:0)

我们最近发现publish.twitter.com上Twitter的用于嵌入式个人资料时间轴的相当新的代码生成器仍然会造成时间轴溢出iOS设备的容器宽度的问题,尤其是宽度和高度设置(并且没有数据-推特限制设置)。

当前,我们正在通过添加CSS处理此问题(根据需要,选择器可能会附加您的特殊性):

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