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

Question

我目前正在尝试为移动设备优化 Wordpress 网站，但我正在努力让网站的页脚进行合作。该网站在这里： http ://whitehallrow.com/

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

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

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

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

score 2 · Accepted Answer

更改您的 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 在右侧有空格。

score 0 · Accepted Answer

同样在萤火虫中，您可以检查指标（在右栏中，您有计算样式、样式、指标等）。在 Metrics 中，您会看到在您的身体周围有一个padding: 24px;

解决方案：

body {
  padding: 0; 
}

2 回答 2