ページをモバイルビューにスリミングするときにヘッダーに巨大な白い隙間がある

Question

モバイルまたはタブレットビューでこのページ（https://www.comparestonehengetours.com/）に行くと、ロゴの上に白い空白が表示されます。すべての空白を削除する方法はありますか？ロゴがうまく表示されますか？

私が意味することをより良く説明するためのイメージを添付しました。

おかげで、クリス

Answer 1

あなたはChromeの要素を調べる使用することを学ぶ必要があります。

その場合は、要素を選択し、パディングを追跡するためにポインタを使用することができます。

あなたはパディングとマージン0の最初の2つの値を加えた場合、それは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; */ 
} 

P.S.ライブサイトのリンクを投稿するのは良いことではありません。可能であれば、問題のサンプルを投稿することをお勧めします。

Answer 3

これは、画面が縮小したときに上部に大きなパディングがあるためです。 CSSの内部にあります。

削除：

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

それともそれを作る：あなたのCSSから

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

。

希望すると便利です。

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ホワイトギャップまで加える。

これが役に立ちますようお願いいたします。