宽度：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在右侧有空格。

Answer 2

同样在firebug中你可以检查METRICS（在右栏中你有Computed Styles，Styles，Metrics等）。在METRICS中，您会看到身体周围有padding: 24px;

解决方案：

body {
  padding: 0; 
}