Wordpress 侧边栏响应宽度答案

【问题标题】：Wordpress Sidebar Responsive WidthWordpress 侧边栏响应宽度
【发布时间】：2016-12-23 08:12:43
【问题描述】：

我创建了一个带有“响应式”侧边栏的 Wordpress 主题。我已将它们设置为 20% 的宽度——效果很好。但是，我的左侧边栏中有一个 Facebook 小部件，它没有根据屏幕宽度/大小“调整大小”。

我在我的 css 中尝试了以下内容，但无济于事：

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

Facebook 小部件在更小/更窄的屏幕尺寸上仍然“重叠”。

【问题讨论】：

我建议建立一个小练习区，而不是下次只链接到您的网站。溢出会起作用，但你不会用创可贴学到太多东西。 jsfiddle.net/xp5knxce 我会从这样的事情开始。此外，这与 WordPress 或 PHP 没有太大关系。祝你好运！

标签： css wordpress facebook plugins responsive

【解决方案1】：

要阻止 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 不会神奇地挤压自身以适应所提供的微小空间（如右列中的拉伸图像），并且可能处于最小可行高度/宽度以实际服务于任何目的。

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

【讨论】：

非常感谢 - iFrame 现在可以完美调整大小。是的，我正在为这个噩梦一次解决一个问题。对于菜单，能否请您指出您的意思，即尽快转到单列布局？
通常我会说编辑你的 css 并更改媒体查询中的断点，但看起来你的主题正在使用 jQuery 将类“响应”应用于 html 元素。查看 script.responsive.js 和您的 script.js 文件以了解这是如何完成的。

【解决方案2】：

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

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

和

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

【讨论】：

【解决方案3】：

当您实时“调整”浏览器窗口的大小或在不同设备上查看页面时会发生这种情况吗？

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

【讨论】：