Question

我用＆＃34;响应＆＃34;创建了一个Wordpress主题。侧边栏＆＃39;第我把它们设置为20％宽度 - 效果很好。但是，我的左侧边栏中有一个Facebook Widget，而不是＆＃34;调整大小＆＃34;根据屏幕宽度/大小。

我在我的CSS中尝试了以下内容，但没有用：

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

Facebook小部件仍然是＆＃34;重叠＆＃34;在较小/较窄的屏幕尺寸上。

Answer 1

iframe周围的宽度错误，请尝试以下方法：

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

和

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

Answer 2

要阻止iframe溢出到中间体内容，您可以应用溢出：隐藏到父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不会神奇地压缩自己以适应所提供的微小空间（如右栏中的拉伸图像），并且可能是最小可行高度/宽度以实际用于任何目的。

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

Answer 3

当您在实时调整浏览器窗口时或在不同设备上查看该页面时，是否会发生这种情况？

根据您使用的小部件，我认为官方的Facebook小部件具有响应式设置，您可以在构建它时进行选择。我注意到，当您以不同的屏幕大小重新加载页面时，窗口小部件本身才会响应。动态调整浏览器窗口大小不会影响窗口小部件的尺寸。它使用javascript正确呈现窗口小部件，但仅限于页面加载。

Wordpress边栏响应宽度

3 个答案: