移动视图上的额外宽度 - 无法弄清楚是什么导致了额外 space

Question

我正在努力让我的网站响应。这是 link：http://www.iPwn.com。

我正在使用 Google Chromes 设备模式，并使用较小的视图（如 iPhone 4 或 320 像素宽度）我不断获得额外的宽度和水平滚动酒吧.

注意： 这严格适用于 320px 左右的宽度。任何更大的我都没有解决（但因为我一直坚持这个）

我已经一个一个地检查并删除了每个元素，一段一段地查看了代码，试图弄清楚是什么在水平扩展布局。我到处都找不到。

起初我以为是顶部的导航，但是我把它完全删除了，它还在。

关于它为什么这样做的任何想法？

-编辑- 由于评论，我刚刚再次测试它，它在 Firefox 中工作，并且由于某种原因，当你调整浏览器 window 大小时它突然在 Chrome 中工作。然而，它仍然无法在 "Device Mode" 中使用，而且在我的 iPhone 本身中也无法使用。

这是一个屏幕截图： http://i.imgur.com/CntrgOk.jpg

Answer 1

找到了。卡片的宽度为 50%，但请记住 <ul> 有一个 padding-left。

2 个解决方案

1) ul{ padding:0px; }
2) cards{width:calc(50% - (ulpadding-left/2) )}

Answer 2

我认为您的 header 部分有问题。它采用 336 像素而不是 320 像素。

#page{
    overflow:hidden;
}

希望这可以解决您的问题

上面的解决方案是快速修复了一段时间。这不是完美的解决方案；从技术上讲。

真正的问题出在您的 #blogFeed 部分。

你的风格

#blogFeed ul.postList {
  margin-left: 5%!important;
}

#blogFeed ul.postList {
  list-style-type: none;
  color: #fff;
  display: block;
  width: 95%;
  margin-left: 0px!important;
  padding-left: 0px!important;
}

它使您的容器成为 105%(320 + 16)，即 336px 宽度，因此容器的原始大小现在是 336px 而不是 320px；

header 的问题：使用 "fixed" 定位的问题在于它使元素脱离了流程。因此它不能 re-positioned 相对于它的 parent。所以现在 width : 100% to FIXED header 它占用 336px 并离开视口（320px）。

希望你能理解。

移动视图上的额外宽度 - 无法弄清楚是什么导致了额外 space

Extra width on Mobile views - Can't figure out what's causing the extra space

html

css

responsive-design