平板电脑或浏览器上出现的空白调整大小

Question

在我当前的项目中，我正在构建网站的平板电脑和移动版本，并在不同大小的浏览器中对其进行测试，但在调整浏览器大小时遇到​​了问题。

可以在以下位置找到该网站的当前版本：http://demo1.zenithtechnosol.net/simlim/html/

请测试一下：http://responsivetest.net/#u=http://demo1.zenithtechnosol.net/simlim/html/|768|1024

基本上每当我调整浏览器的大小以检查它在平板电脑上的外观时，即使没有超出包含元素的宽度，也会在右侧呈现空白并出现 x 滚动条。

我几乎可以通过添加 overflow: hidden 来解决这个问题，但这会完全禁用 x 滚动，这是我不想要的。

我已经在所有主流浏览器上对此进行了测试，所有响应都相同，所以它一定与 CSS 有关，具体我不太确定，但它可能是我设法错过的非常简单的东西。

任何帮助将不胜感激！

Answer 1

您可能希望将.pad-20 {padding:20px} 更改为.pad-20 {padding:20px 0}，当然还需要从body 中删除overflow-y:scroll; overflow-x:hidden。