右侧网站上不需要的空白区域(仅限小屏幕)

时间:2014-03-25 15:18:16

标签: html css layout responsive-design

我正在处理一个响应式网站。屏幕右侧有一个白色空间,屏幕尺寸大致低于767px。这就是“移动”布局的重点。我在桌面大小上遇到了同样的问题,并通过将页脚设置为99%宽度来修复它,并将问题解决了更大的屏幕尺寸。我尝试使用页脚宽度来播放移动设备,但没有运气。

我不知道在较小视口的屏幕右侧是什么原因造成这个空白区域。我在控制台中尝试了检查工具,但我找不到问题。

我会发布代码,但看到我无法追踪问题,我不知道该发布什么。

网页网址:http://sevenclanscasino.designangler.com/warroad/warroad-home

3 个答案:

答案 0 :(得分:1)

对于任何遇到类似问题并且在 devtools 中悬停元素而苦苦挣扎的人,我遇到了这个技巧 on another forum.

* { border: 1px solid red !important; }

这非常有帮助地向您展示了项目中的所有边界。在我的情况下,它是一个网格溢出其父级。享受!

答案 1 :(得分:0)

在响应式网站上工作时,应始终以%而不是px设置宽度值。因此,请尝试设置with:100%

希望这有帮助。

答案 2 :(得分:0)

尝试将某个元素更改为css。

.row { margin-left: 0; margin-right: 0; }
header #top-nav-container #top-nav { width: 100%; }
header #top-nav-container #top-nav { margin-left: 0; }

另一种方式(但请不要这样做):

body { overflow: hidden; }