Question

之前我可以使用下面的代码来使Twitter嵌入响应：

            iframe[id^='twitter-widget-'] { width: 100% }

但是这不再适用。我尝试了不同的东西，但没有一个能奏效。有没有人对此有更新的解决方法？

您可以在此处查看：http://musik.dk/samsmith/

Answer 1

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

然而，窗口小部件所在的容器具有最小宽度，因此它将与其对齐。

 <section class="mcl mr350">

Answer 2

以下CSS应该有效：

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

Answer 3

<iframe id="twitter-widget-1" scrolling="no" frameborder="0" allowtransparency="true" class="twitter-timeline twitter-timeline-rendered" title="Twitter Timeline" height="600" style="border: none; max-width: 100%; min-width: 180px; width: 520px;"></iframe>

请参阅width: 520px;

Answer 4

我采用了略有不同的方法，该方法在测试时似乎效果很好。为了确保该tweet是响应性的（假设您使用的是标准tweet嵌入代码），如果您希望采用一种确定的方法来解决此问题，建议将其添加到CSS文件中：

.twitter-tweet {
width: 100%;
padding: 20px;
}

如果比较挑剔，则填充特别有用，它将有助于清理内容。

响应式Twitter嵌入

4 个答案: