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

Question

我正在尝试更改您可以看到的 Twitter 源模块的高度 here. The layout was done by the vendor we're using for our WCMS, so the CSS is proving a little difficult to navigate. I resized the iFrame for the feed so that it spans two rows, but now when it resizes for phones and tablets it overlaps the "Spotlight" article below it. Here's the CSS。非常感谢任何帮助！

Answer 1

与其使用 clear:both 使用额外的 div 清除浮动，不如练习使用 overflow:hidden

清除父容器中的浮动

您的 Twitter iFrame 与您的 "spotlight" 文章重叠的问题的临时修复是由于 app.css 中的第 3568 行指定了最大高度。删除它应该可以解决问题。

.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

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

你可以做的是在你的 媒体查询 中用这样的东西覆盖 320 像素的最大高度限制：

.home-content-modules-row .content-module {
    max-height: 1000px;
}

希望对您有所帮助！！！

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

Changing article height with @media query

css

media

iframe

overlapping

responsive-design