无法识别是什么触发网站主页在移动设备上显示时过宽答案

【问题标题】：Cannot identify what triggers website homepage to be too wide when shown on mobile无法识别是什么触发网站主页在移动设备上显示时过宽
【发布时间】：2020-07-14 05:47:26
【问题描述】：

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

我已尝试搜索错误但找不到。我什至复制了页面http://www.reseth.nl/hometest，然后奇怪地在移动设备上显示正确。

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

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

【问题讨论】：

在哪个设备（操作系统/浏览器）上无法正确呈现？

标签： html css responsive-design responsive

【解决方案1】：

首先开始隔离问题是个好主意。如果您认为问题是由社交图标引起的，请评论/删除它，看看没有它时页面是否正确呈现。

【讨论】：

谢谢 - 我知道但需要提醒 ;-) 因此，查看自定义 CSS，我能够识别代码，当删除时，删除了问题：.home #wrapper-1 {溢出-x：可见； }
:) 很高兴它有帮助

【解决方案2】：

您的版块上非常大的边距和填充是导致此问题的原因

例如，你有

#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;
}

像这样使用边距和内边距会导致这些问题。这绝对很麻烦而且不需要。

【讨论】：

谢谢 - 以上似乎不会影响网站，但我会看看它！

【解决方案3】：

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

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

所以在这种情况下，每个社交链接都在拉伸它的容器以填满屏幕。

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

【讨论】：

谢谢 - 我已禁用社交链接，但问题仍然存在。我还用可以正常工作的重复主页替换了当前出现故障的主页，但问题仍然存在。所以它必须是与主页相关的特定内容。