无法确定是什么触发网站主页在移动设备上显示时太宽

Question

我建立了一个网站 https://www.reseth.nl，该网站在主页上显示的宽度过大，仅适用于移动设备。

我试图搜索错误但找不到。我什至复制了该页面 http://www.reseth.nl/hometest，奇怪的是它在移动设备上显示正确。

附上两个显示问题的屏幕截图： correct width incorrect width

您可以在屏幕截图底部的社交图标中看到某些东西触发了过大的宽度。但是什么！？非常感谢任何帮助！

Answer 1

您版块上的边距和填充非常大导致了这个问题

例如，您有

#content-block-background-1358 {
    margin: 0 -10000px;
    padding: 0 10000px;
}

#content-block-background-1055 {
    margin: 0 -10000px;
    padding: 0 10000px;
}

#content-block-background-1099 {
    margin: 0 -10000px;
    padding: 0 10000px;
}

#content-block-background-1755 {
    margin: 0 -10000px;
    padding: 0 10000px;
}

像这样使用边距和填充会导致这些问题。这绝对麻烦，不需要。

Answer 2

我看了一下，似乎是因为这个 css 选择器：

.essb_links.essb_nospace.essb_width_columns_5 li a {
  width:100%;
}

所以在这种情况下，每个社交 link 都会拉伸其容器以填满屏幕。

您可以使用适当的宽度覆盖选择器或修复导致 100% 值的任何原因。

Answer 3

最好先开始隔离问题。如果您认为问题是由社交图标引起的，comment/remove 它并查看页面是否在没有它的情况下正确呈现。