Responsive Padding Trouble

我設計了一個教程的響應式網頁，我有一個不必要的填充問題。Responsive Padding Trouble

http://zinzinzibidi.com/res

在此頁面中，當你降低你的瀏覽器窗口的分辨率，你會看到在一些決議，水平滾動條（溢出-X）。我想了解，但我無法解決這個問題幾天。

這裏是我的麻煩的一個示例圖片：

enter image description here

我的CSS代碼這裏：http://zinzinzibidi.com/Areas/res/Content/css/style.css

我的媒體屏幕代碼

My CSS codes

我在做什麼錯誤？

來源

2014-08-29 Mr. Zoidberg

看起來是一個內部項目造成的問題。從＃header-main-buffer中刪除填充，它應該消失。

行文件的515：

#header-main-buffer { 
    width: 300px; 
    padding: 0 10px; <- this is your problem. remove it and it will be fixed 
    ...

來源

2014-09-05 03:43:27 ericjbasti

謝謝你現在工作正常。你可以檢查出來。順便說一下，你是怎麼注意到這個問題的？ 300px的寬度和10px的右邊距+10px左邊的填充物響應320px媒體屏幕寬度（？） – 2014-09-05 04:45:22

＃head-container具有完全相同的寬度和填充，所以其內部元素將從10px開始向右填充它。你真的可以擺脫＃head-container上的填充，它應該可以工作，它只是緩衝項目對我來說似乎更方便。 – ericjbasti 2014-09-05 14:08:23

你也可以通過設置'box-sizing：border-box'避免將來出現這種情況;'你應該看看那個（[解釋borderbox的鏈接]（http://www.paulirish.com/2012/box-sizing -border-box-ftw /）），因爲它會導致填充進入元素寬度，所以你實際上會這樣寫：'width：100％;填充：0 10px;盒子大小：邊框;' – ericjbasti 2014-09-05 14:28:44

我檢查了你的代碼，它可能是你的<div id="header-logo">創建額外的填充。

由於img在屏幕上的固定寬度爲300px，因此小於tit會在右側創建額外的填充以適合屏幕。

嘗試降低

@media screen and (max-width: 479px) and (min-width: 320px) { 
#header-container { 
    width:; 
} 
}

編輯

基本上勾選所有你使用，所以你要確保它們的寬度是適當的，他們適應屏幕的img。

來源

2014-08-29 19:49:01 mencina

這個問題也已經在其他媒體上的屏幕。所以這與圖像分辨率無關。 – 2014-08-29 21:11:39

Responsive Padding Trouble

回答

相關問題