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

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）。我不确定到底为什么，但我认为如果有必要你可以保留它。