css - 宽度:在移动设备上 100% 不填满屏幕

Question

我目前正在尝试针对移动设备优化 WordPress 网站，但我正在努力让网站的页脚配合。该网站在这里: http://whitehallrow.com/

在移动设备上加载时，正文的宽度会根据屏幕尺寸缩小并包裹其中包含的所有文本。但是，页脚保持其宽度，据我了解，这是因为宽度是硬编码的，以便在计算机屏幕上看起来不错。我在 CSS 中进行了媒体查询，该查询针对屏幕宽度为 500 像素或更小的设备，以便让页脚调整大小以适应正文的宽度。这是我一直在调整的 CSS 片段:

@media screen and (max-width: 500px) {
#customfooter{
        width:100%;
}
}

无论出于何种原因，这都不起作用 - 它仍然显示页脚比正文宽得多。我尝试过 max-width:100%, width:auto; max-width:auto，但它们都不起作用。

如何在不硬编码任何内容的情况下实现这一目标？

Answer 1

将 CSS 更改为

#teakfooter {
    width: 100%;
}
#verybottom {
    width: 100%;
}

添加一个类，使其获得更高的优先级

.page #teakfooter {
    width: 100%;
}
.page #verybottom {
    width: 100%;
}

我使用 Firebug 进行了尝试，看起来效果很好。

编辑:在查看了评论中的更多内容后，我注意到有几件事导致页脚未填写。

.site {
    padding: 0 1.71429rem;
}

这导致#customer 页脚两侧都有内边距。

#teakfooter {
    margin-left: -40px;
}

这导致#teakfooter 右侧有空格。