html - 主页和其他页面的 CSS 不同 opencart

Question

我正在使用媒体查询开发我们网站的移动版本，但我遇到了 CSS 的一些奇怪问题。

我已经让主页在移动设备上完全响应(< 480 像素)，它看起来不错:

现在我正在处理第二页 (tuinotwerp)此页面使用与首页相同的 block ，但 css 不同:

如您所见，棕色 block 更宽，但 css 相同。即使在 Chrome 开发工具检查器中，它也完全一样。

这是我的 block 的CSS:

#diensten-row {
    width: auto;
    min-width: 100%;
    padding: 0;
    margin: 30px auto 0 auto;
    height: 120px;
}

#diensten-row a{
    width: auto;
    max-width: 100%;
}

#diensten {
    background-color: #996633;
    color: #fff;
    line-height: 8px;
    float: left;
    margin: 0 auto 30px auto;
    padding: 0;
    min-width: 100%;
    height: 100px;
    text-align: center;
    border: 1px solid #fff;
}

HTML:(仍在寻找包含 div 的文件)

谢谢:)

Answer 1

由于#diensten-row、#diensten和#diensten-row a的宽度都是100%，我预测容器的宽度tuinontwerp 页面比第一页略大。

还有一个提示:不要多次使用ID。我看到您多次使用 ID #diensten。为此使用一个类。 ID 只应在 elementen 仅使用一次时使用。但即便如此，我还是喜欢使用 classes。