手机屏幕右侧出现白条的原因可能是什么？

Question

我一直在尝试清除 website 手机屏幕右侧的白条，但似乎没有任何效果。请参阅下面的屏幕截图：

Screenshot of the white bar when inspecting element, highlighted code does not include white bar 1

Screenshot of the white bar when inspecting element, highlighted code includes white bar 2

首先，我认为某些元素可能超出了宽度，所以我隐藏了所有部分，但这没有用。

其次，我禁用了所有插件，认为某些插件可能是原因，但那也不起作用。

奇怪的是，该栏只出现在首页，而其他页面都可以。

我得到的最接近的线索是怀疑 .text-page 是可能的原因，因为它是唯一选择右侧填充的代码。

虽然我 80% 确定它一定与 CSS 相关，但我不知道如何修复它。

如果能帮我清理烦人的栏，我将不胜感激。

谢谢

Answer 1

右边的白条似乎是由于将 css class .row 应用于 .container 中的 div 元素之一造成的

.row 定义 margin-left: -15px; margin-right: -15px;

发生的情况是 .row 被应用到容器内的 div 元素，而不是你的 header。因此，此 div 尝试将其边界比任何其他 object 多推 15 个像素。但是，由于宽度限制由您的 device/browser 设置，此 div 达到 max-width 并使页面中没有负边距的所有其他内容缩小。

其中一个解决方案是从 div 中删除 .row class。另一种方法是将 overflow 属性 设置为 .main-wrapper，这样负边距仍将包含在包装器中，并且不会影响页面的其他元素。

请注意，这些解决方案会产生不同的输出，因为第一个会缩小您的内容（并且其两侧仍然有两个白条，这是由 .vc_column-inner 引起的）而第二个会阻止它从缩小网站的其余部分。