Question

我的网站是www.rosstheexplorer.com。

我正在使用Penscratch主题，虽然已经修改了它的许多方面。

我最近做了一些更改，包括使标题和导航栏全宽。

这些变化的意外后果之一是导航菜单与主要和次要区域之间存在大量空间。

我使用了Google Chrome上的开发者工具，并开始尝试更改页面上各种元素的宽度，填充和边距。

以下代码是我最接近解决问题的代码。如果浏览器窗口是某些尺寸，则以下仅适用。如果浏览器窗口很小，则下面的代码会强制内容区域和窗口小部件区域与导航菜单和标题重叠。

有没有办法可以修改下面的代码，这样无论浏览器窗口大小如何，它都能正常工作。

.widget-area {
    float: right;
    width: 30%;
    margin-top: -350px;
}

#primary.content-area {
    float: left;
    width: 70%;
    margin-top: -350px; 
}

还是有另一个完全不同的解决方案吗？

Answer 1

更改以下css

style.css:1932 @screen and (min-width: 75em)
.site {
    max-width: 1153px;
    margin: 400px auto;   // change this to margin: 5px auto;
    padding: 54px 108px;
}


:43 @screen and (min-width: 75em) 
.site {
    max-width: 1153px;
    margin-top: -50px auto; //remove this minus is not recommended
    padding: 54px 108px;  // change this to padding: 0px 108px 54px 108px;
}

请更改上述边距和填充

Answer 2

比这简单得多： http://www.rosstheexplorer.com/?custom-css=cedea99283 第45行：margin-top只接受1个属性，你指定2（50px auto）。只需删除＆＃34; auto＆＃34;

删除.widget-area，.comment-area和.main-navigation之间的空格

2 个答案: