寬度：100％未在移動設備上填滿屏幕

我目前正在嘗試優化移動設備的Wordpress網站，但我正在努力獲取網站的頁腳進行合作。該網站在這裏： http://whitehallrow.com/寬度：100％未在移動設備上填滿屏幕

當移動加載時，主體的寬度會根據屏幕尺寸縮小並將所有包含的文本包裹在其中。但是，頁腳保持其寬度，我知道這是因爲寬度是硬編碼在電腦屏幕上看起來不錯。我在CSS中針對500像素寬或更小的屏幕設備進行了媒體查詢，以便讓頁腳調整到主體寬度。這裏是我的CSS代碼，可我已經調整：

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

無論出於何種原因，這是行不通的 - 它仍然顯示頁腳爲比身體寬得多。我試過最大寬度：100％，寬度：自動;最大寬度：自動，並沒有一個工作。

如何在不硬編碼的情況下實現這一目標？

2013-06-11 Ben

從

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

更改CSS添加一個類，所以這得到更高的優先級

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

我嘗試過了使用Firebug，似乎這樣的運作良好。

編輯：在評論中經過了更多的事情之後，我注意到一些事情導致頁腳沒有填寫。

.site { 
    padding: 0 1.71429rem; 
}

這導致#customer頁腳在兩側都有填充。

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

這導致#teakfooter在右側有空白。

2013-06-11 21:00:43

當我打開它在我的黑莓大膽，頁腳不收縮，但它變得過於狹窄，只佔用約80 ％身體的寬度... – Ben

嘗試用此更新您的CSS： .page #customfooter { height：auto; margin：0; 寬度：100％; } –

這似乎清理了我可以看到的大部分剪輯。 –

也可以在firebug中檢查METRICS（在右欄中有計算樣式，樣式，指標等）。在指標，您會發現在你的身體有一個padding: 24px;

解決方案：

body { 
    padding: 0; 
}

2013-06-11 21:11:03 bboy

回答