Question

我正在尝试更改您可以看到here的Twitter Feed模块的高度。布局由我们用于WCMS的供应商完成，因此CSS有点难以导航。我调整了iFrame的大小，以便它跨越两行，但现在当它为手机和平板电脑调整大小时，它会重叠在它下面的“Spotlight”文章中。 Here's the CSS。非常感谢任何帮助！

Answer 1

而不是使用clear清除你的花车额外的div：两者最好使用overflow：hidden

来清除父容器中的花车

您的Twitter iFrame与“聚光灯”文章重叠的问题的临时修复是由于app.css中的第3568行指定了max-height。删除它应该解决问题。

.home-content-modules-row .content-module {
    /*max-height: 320px;*/
}

或者在平板电脑或移动设备表单中执行媒体查询以指定该元素的max-height：auto。

@media only screen and (min-width: 64.063em) {
    .home-content-modules-row .content-module {
        /*max-height: 320px;*/
    }
}

Answer 2

您遇到此问题的原因是因为包含article的{{1}}标记附加了iframe属性CSS。因此，当您在移动视图中查看时，max-height:320px标记不会超出320像素。由于在移动视图中宽度也在减小，320px高度限制会导致内容重叠而不是在其下方流动。

您可以做的是在媒体查询中覆盖320px的最大高度限制：

article

希望这有帮助!!!

使用@media查询更改文章高度

2 个答案: