Question

我的WordPress网站使用Quidus主题包含右侧不必要的空间，看起来非常糟糕。请帮忙：我该如何删除这个空间？我希望我的网页能够填满整个屏幕。左侧或左侧不需要保证金。

Look at the image provided below of my website.

注意：我希望所有帖子都适合屏幕全宽。

Answer 1

您的HTML结构是：

<div id="page">
  <div class="site-content"></div>
  <div class="right-sidebar-wrapper"></div>
</div>

你的CSS是：

@media screen and (min-width: 955px) {
  .site {
    max-width: 1718px;
  }
}

@media screen and (min-width: 1105px) {
  .site-content {
    width: 56%;
  }
}

@media screen and (max-width: 1105px) and (min-width: 955px) {
  .site-content {
    width: 70%;
  }
}

@media screen and (max-width: 480px) {
  .right-sidebar-wrapper {
    width: 100%;
  }
}

@media screen and (max-width: 768px) and (min-width: 480px) {
  .right-sidebar-wrapper {
    width: 100%;
  }
}

@media screen and (max-width: 1105px) and (min-width: 955px) {
  .right-sidebar-wrapper {
    width: 70%;
  }
}

@media screen and (min-width: 1105px) {
  .right-sidebar-wrapper {
    width: 22%;
  }
}

您的CSS问题是.site-content，.right-sidebar-wrapper宽度不会使其100％成为其父级。

让我们澄清一下：

窗口宽度＆gt; 1105px .site-content = 56％而.right-sidebar-wrapper = 22％因此56％+ 22％= 78％但100％ - 78％= 22％这是此分辨率的保证金来源
窗口宽度＆gt; 955和＆lt; 1105 .site-content = 70％且.right-sidebar-wrapper = 70％会使您的右侧边栏显示在.site-content下方，因为70％+ 70％= 140％因此#page无法包含在同一行

要解决此更改.site-content和.right-sidebar-wrapper CSS规则的宽度，以便他们将父级宽度的100％视为您希望它们彼此相邻显示的分辨率。

可能的解决方案是改变：

@media screen and (min-width: 1105px) {
  .site-content {
    width: 56%;
  }
}

@media screen and (max-width: 1105px) and (min-width: 955px) {
  .right-sidebar-wrapper {
    width: 70%;
  }
}

到：

@media screen and (min-width: 1105px) {
  .site-content {
    width: 78%;
  }
}

@media screen and (max-width: 1105px) and (min-width: 955px) {
  .right-sidebar-wrapper {
    width: 30%;
  }
}

如何从我的网站右侧删除不必要的保证金

1 个答案: