移动版本我站点右侧的空白区域

Question

我正在制作一个网页。我是第一个承认我的CSS技能不是最好的人。

移动版页面的右侧出现空白区域。 （www.perfectshinesmile.com）

Answer 1

  

您的容器没有获取保证金：移动广告中的0自动。

所以从第2638行 main.css

替换

@media only screen and (max-width: 641px)
.container {
    max-width: 360px;
    margin: 0 0;
}

以

@media only screen and (max-width: 641px)
.container {
    max-width: 360px;
    margin: 0 auto;
}

希望这会有所帮助：）

Answer 2

您的.container已将max-width属性设置为360px。将其更改为max-width: none。但我建议您使用bootsrap grid进行网页布局，这样可以避免出现这样的问题。我可以在你的代码中看到很多元素都有特定的宽度值，导致移动设备上的布局破坏。

Answer 3

在你的情况下，你有第二个滚动条！

或者你这样做

::-webkit-scrollbar {display:none !important;}

或者你这样做

    @media only screen and (max-width: 641px){
    .section {
        min-height: auto;
        width: 360px;
        overflow: visible;
    }
}

不要使用溢出：滚动;永远，除非你需要它！特别是在手机端口！