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

Question

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

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

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

谢谢！

我的网站：fanismahmalat.com

Answer 1

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

Answer 2

当滚动条离开白色空间切换到移动设备时，似乎发生了奇怪的事情。

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

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

我只在Chrome中测试了这个，再次与检查员测试过，但这可能有所帮助。我注意到你有height:1000px（硬编码为1000px）。我不确定为什么，但我认为如果有必要你可以这样做。