html - 部分背景在手机上被截断

Question

我的网站http://www.andytechguy.com/上有一个奇怪的背景错误。您可以看到，当您在移动浏览器上搜索该网站时，顶部的部分渐变被切掉了。我不知道这是怎么回事，我没有添加任何东西来实现这一点，而且看起来不太好。请帮忙？

Answer 1

据我所知，您的h2文字在移动设备和桌面设备上更大。这可能与字体渲染和您的相对大小有关1.5em。

你的背景渐变是 70px 高。在移动设备上，由于标题的高度大于 70 像素，它会不断重复。

我会像这样修改你的CSS：

CSS

#section h2 {

     /* remove this */
     padding: 20px;

     /* add these two */
     height: 70px;
     line-height: 70px; /* this will vertically align the text */

}

Answer 2

问题是它#main_part的固定宽度为 1050px。但该网站的其余部分假设宽度约为 980 像素。（我的手机中为 980px）

只需添加这样的 css 规则：

html {
   width: 1050px;
}

你会注意到顶栏不再被切断。

---

然而，那个烦人的水平滚动可能仍然存在（但这次没有空白）

这些都不能替代实际创建响应式网站。这到底是真正的解决方案。我可以建议您将您的网站转换为引导程序吗？

Answer 3

将您的 div 移动到“容器”类中并创建您自己的自定义类，如下所示：

.custom-container{
    min-width: 100%;
    padding-right: 0;
    padding-left: 0;
}

总的来说，写这个

<div class="container custom-container">
    <!-- ... -->
</div>