移动网站的CSS问题

Question

我正在建设this移动网站。

如果你在你的手机浏览器上检查它，它应该适合没有水平滚动的情况。(内容只能垂直堆叠)。有没有人可以帮我修复页面的CSS。只要让我知道正确的CSS应该是什么，以便自动调整不同的手机。

这个页面的CSS可以在here上找到。基本上，我猜有两个主要组成部分。(正文和内容)。

此外，我还使用了this手机网站作为示例。请通过查看该页面的源代码来参考它的内联CSS。

谢谢

Answer 1

好的，看起来你的#content div实际上是在突破屏幕的界限，甚至在我的firefox浏览器上也是如此。在你的CSS中，你可以这样声明它：

#content{
    width:100%;
    margin: 0;
    padding: 20px;
    background: white;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
}

我已经通过在本地编辑CSS确认，您的填充实际上推动了100%宽度div的边界，但好消息是，由于它是一个块级元素，它已经填满了所有可用的空间。试着去掉"width:100%;“，看看它是否适合你。它仍将显示完全相同的内容，但没有这些滚动条。

所以就像这样：

#content{
    padding: 20px;
    background: white;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
}