html - モバイルで背景の一部が切れる

Question

私のサイトhttp://www.andytechguy.com/に奇妙なバックグラウンド バグがあります。モバイル ブラウザでサイトを検索すると、上部のグラデーションの一部が切り取られていることがわかります。何が起こっているのかわかりません。それを実現するために何も追加していません。見た目も良くありません。助けてください？

Answer 1

私が言えることから、あなたのh2テキストはモバイルよりもデスクトップの方が大きくなっています。これはおそらく、フォントのレンダリングと相対的なサイズに関係しています1.5em。

背景のグラデーションは高さ 70px です。モバイルでは、ヘッダーの高さが 70px を超えているため、同じことが繰り返されます。

CSS を次のように変更します。

CSS

#section h2 {

     /* remove this */
     padding: 20px;

     /* add these two */
     height: 70px;
     line-height: 70px; /* this will vertically align the text */

}