Question

我的网站是www.rosstheexplorer.com。

对于我的小部件区域，FB小部件很大，所以我使用下面的代码来调整页面两个部分的宽度。

 #primary.content-area {float: left;width: 70%;}
    #primary.content-area .site-main{width:100%;}
    .widget-area{float:right;width:30%;}

我还修改了Penscratch主题，因此自定义标题和导航菜单扩展到整个页面。

所有这些变化的意外后果是，当我缩小我的网站时，我网站两侧的空白区域存在巨大的不平衡。

我想尝试将内容 - 区域和小部件 - 区域对齐。

我没有尝试任何可能的解决方案，因为我无法在Google上找到任何有关我的方向隐约指向的信息。我在Google上找到的所有信息都与其他主题相关，或者仅与个别图片，文字和标题居中相关。

更新 -

我在下面尝试了一个建议。现在我的代码看起来像这样 -

<div class="full-screen-template">
#primary.content-area {float: left;width: 70%;}
#primary.content-area .site-main{width:100%;}
.widget-area{float:right;width:30%;}
</div>

#page {
  margin: 0 auto;
}

<div class="mobile-template">
#primary.content-area {float: left;width: 100%;}
.widget-area{float:right;width:100%;}
</div>

不幸的是它似乎没有解决我的问题。

Answer 1

尝试将中心对齐内容和小部件区域：

#page {
  margin: 0 auto;
}

<强>更新

我认为它不起作用的原因是你在.css文件中有HTML代码：

<div class="full-screen-template">
....
</div>

这可能会阻止浏览器继续前进，因此它永远不会到达#page行。

我不确定您尝试使用css文件中的HTML实现了什么，但尝试删除它以查看它是否解决了问题。

让site-main和widget-area位于页面中心

1 个答案: