將減肥頁面移動到移動視圖時頁眉中存在巨大的白色空白

Question

如果您在移動設備或平板電腦視圖中轉到此頁面（https://www.comparestonehengetours.com/），則徽標上方會有大量空白空間。有沒有什麼方法可以去掉所有的空白區域，這樣就可以很好地顯示徽標了？

我附上了一張圖片，以幫助更好地解釋我的意思。

謝謝，克里斯

Answer 1

你應該學會使用Chrome瀏覽器檢查元素。

如果你這樣做，你可以使用指針來選擇元素，並追查填充。

你可以看到，如果你讓填充和利潤率0將dissappear的前兩個值。

Answer 2

如果忽略這些規則設置填充和保證金，你應該有它：

@media only screen and (max-width: 500px) and (min-width: 450px) 
#mj-header { 
    /* padding: 55px 0 0px; */ 
} 

@media screen and (max-width: 700px) 
#mj-header { 
    /* padding: 55px 0 0; */ 
    /* margin: 55px 0 0; */ 
} 

附：發佈活網站鏈接並不好。如果可以的話，最好儘量只發佈一個問題的樣本。

Answer 3

這是因爲當屏幕縮小時，頂部會有巨大的填充。它在CSS內部。

刪除：

@media only screen and (max-width: 1000px) and (min-width: 720px) { 
    #mj-header { 
    padding: 25px 0 5px; 
    } 
} 

或使其：

@media only screen and (max-width: 1000px) and (min-width: 720px) { 
    #mj-header { 
    padding: 5px 0; 
    } 
} 

從你的CSS。

希望這會有所幫助！

Answer 4

速戰速決將是把媒體查詢（在這種情況下，標準的iPhone）

@media only screen 
    and (min-device-width: 320px) 
    and (max-device-width: 480px) 
    and (-webkit-min-device-pixel-ratio: 2) 
    and (orientation: portrait) { 
} 

，並相應地調整填充和利潤（在55像素加起來110白色差距往上頂。

希望這會有所幫助！