我的页面在移动设备上水平滚动

Question

我刚刚发现我的网站在移动设备上水平滚动。但是，我无法找出发生这种情况的原因。

当我在浏览器中查看时，容器和正文似乎具有正确的宽度。

有什么想法吗？

https://www.urban-zweirad.de

干杯， 标记

Answer 1

您的标题或导航上有一些额外的边距，其宽度超过您的身体/容器。

在正文中添加overflow-x:hidden

body{
    overflow-x:hidden
}

Answer 2

似乎来自_pages.scss的第204行正在创建问题

.teaser {
    padding: 0!important;
}

尝试删除此内容。

Answer 3

问题在于您的班级名为“main”

你需要做的是添加css属性：overflow：hidden;

.main{
overflow:hidden
}

认为这可能会对你有所帮助。

Answer 4

您的问题出在HTML的这一部分。 @pons awnsered正确。

<div class="container-fluid center teaser" data-plim="495">
    <div class="row">
        <div class="col-xs-12">
            ...
        </div>
    </div>
</div>

你怎么解决？您可以删除.row课程。因为这是一个全宽度的bootstrap col，所以这不是必需的。并且.container-fluid已经清除了浮点数。

您也可以将CSS课程的.teaser更改为：

.teaser {
    padding: 0 !important;
    overflow: hidden; // This fixes the negative margin on the row to be hidden inside its parent.
}

Answer 5

将以下css添加到body标记

.body{
  ..
  ..

  width: calc(100% - 8px);
}