移動時的標誌尺寸

Question

我附上了一張圖片來幫助解釋我想要完成的事情。我希望在移動設備上查看我的徽標時可以顯示與圖片類似的圖片。不確定是否有一些填充導致它位於菜單選項卡的上方而不是水平。

網站地址是https://chris-schilling-jksc.squarespace.com/

密碼是FSJ

Answer 1

它只水平顯示。但我的感覺是，你已經設置了一個height。如果你刪除這種風格可能會有所幫助。

#header #logoWrapper, #header #logoImage { 
    width: 350px; 
    height: auto; 
} 

而且也實在是更好的，如果它適用於桌面，以使其與@media查詢相結合的移動。

@media screen and (max-width:640px) { 
    #header #logoWrapper, #header #logoImage { 
     width: 350px; 
     height: auto; 
    } 
} 
@media screen and (max-device-width:640px) { 
    #header #logoWrapper, #header #logoImage { 
     width: 350px; 
     height: auto; 
    } 
} 

Answer 2

設置標誌的高度自動，而不是85px。

#header #logoWrapper, #header #logoImage { 
    width: 350px; 
    height: auto; 
} 

Answer 3

添加這個CSS：

@media screen and (max-width:640px) { 
    #header #logoWrapper, #header #logoImage{ 
     height: auto; 
    } 
} 

的問題是正在定義的高度導致其出現較大。

Answer 4

你有一個高度#header #logoWrapper, #header #logoImage設置---把它在汽車和元素將調整基於其display: inline-blockvertical-align: middle

我只是檢查它的開發工具。

Answer 5

試試這個。

@media (max-width:640px){ 

    #logoImage a { 
    margin-top:20px; 
    } 

} 

注意：不要讓標誌變大，因爲iPhone的寬度是320px。如果您增加徽標的大小，那麼該菜單圖標將在手機上消失。