WordPress 侧边栏响应宽度

Question

我创建了一个带有 "responsive" 侧边栏的 Wordpress 主题。我已将它们设置为 20% 宽度 - 效果很好。但是，根据屏幕宽度/大小，我的左侧边栏中有一个 Facebook 小部件，它不是 "resizing"。

我在 css 中尝试了以下方法，但没有用：

.fb_iframe_widget iframe {
    position: relative;
    max-width: 100%;
    min-width: 100%;
}

Facebook 小部件在较小/较窄的屏幕尺寸上仍然 "overlapping"。

Answer 1

您的 iframe 跨度宽度错误，试试这个：

<span style="vertical-align: bottom;width: 100%;height: 230px;">

和

.fb_iframe_widget iframe {
   position: relative;
   max-width: 100%;
}

Answer 2

要阻止 iframe 溢出到中间正文内容，您可以应用 overflow: hidden 到父级 div

.art-blockcontent {
    overflow: hidden;
    padding: 7px;
    margin: 0 auto;
    color: #000000;
    font-size: 12px;
    font-family: "Myriad Pro", "Gill Sans", "Gill Sans MT", Calibri, sans-serif;
}

iframe 不会神奇地压缩自身以适应所提供的微小 space（如右栏中的拉伸图像）并且可能处于最小可行高度/宽度以实际用于任何目的.

我注意到您的导航菜单在较小的屏幕尺寸下也会损坏，也许您最好更改整体断点并让您的网站尽快进入单栏布局。

Answer 3

当您 'resize' 浏览器 window 在线时或当您在不同设备上查看页面时是否会发生这种情况？

根据您使用的小部件，我相信官方 Facebook 小部件具有响应设置，您可以在构建它时 select。我注意到小部件本身仅在您以不同的屏幕尺寸重新加载页面时才会响应。动态调整浏览器 window 不会影响小部件的尺寸。它使用 javascript 正确呈现小部件，但仅在页面加载时呈现。

WordPress 侧边栏响应宽度

Wordpress Sidebar Responsive Width

css

wordpress

plugins

facebook

responsive