在移动浏览器上查看时如何从网站中删除多余的空白

Question

浏览器正在移动屏幕右侧呈现额外的空白区域。 我尝试修改以下属性但没有任何进展：

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}

它仍然没有删除额外的空白。 我也没有看到任何元素从网格的侧面溢出。 有任何想法吗？

谢谢！

我的网站： fanismahmalat.com

Answer 1

在滚动条离开空白区域的情况下切换到移动设备时，似乎发生了一些奇怪的事情。

我在 Chrome 检查器的 CSS 中添加了以下内容并解决了这个问题：

html,body
{
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
    overflow-x: hidden; 
}

我只在 Chrome 中对此进行了测试，并再次使用检查器进行了测试，但这可能会有所帮助。 我注意到你有height:1000px （硬编码为 1000px）。 我不确定到底是为什么，但我认为如果有必要，你可以保持原样。

Answer 2

问题出在超过宽度的笔记本电脑图像中。 https://i.stack.imgur.com/zlg6R.png