モバイルウェブサイトのテキストの重複

これは単なるCSSの問題だと思います。だから私はそのコードだけを表示します。問題が何であるかを把握しようとしているからモバイルウェブサイトのテキストの重複

body { 
    margin: 0px; 
    padding: 0; 
    font-family: 'Raleway', sans-serif; 
    color: white; 
    background-image: url('https://m.mywebsite.com/style/mobile.jpg'); 
    background-size: cover; 
} 
h2 { 
    position: relative; 
    top: 40px; 
    left: 22px; 
    width: 750px; 
    height: 45px; 
    font-size: 85px; 
    font-family: 'Raleway', sans-serif; 
} 
.nav { 
    background-color: #ffffff; 
    color: #000000; 
    list-style: none; 
    text-align: center; 
    margin: 0px; 
    height: 70px; 
    position: fixed; 
    width: 100%; 
    top: 0; 
    padding: 10px 0 10px 0; 

} 

.logo { 
color: #000000; 
float: center; 
font-size: 50px; 
font-weight: 600; 
padding: 0 0 0 0; 
}

は、私は多分H2と.logoは、それがテキストのオーバーラップを作っ継承したか見てみました。私は体のスタイルからいくつかのコードを削除しようとしましたが、うまくいきませんでした。私はまた、なぜこれが起こるかについて、多くの情報をオンラインで見つけることはできません。私は人々の時間を無駄にしようとしていない、ちょうどいくつかの助けが必要です。前もって感謝します！

私のモバイルサイトに行くと、スタイルはオフになっていますが、自分のiPhoneで自分のサイトを見たときに表示されるテキストが重複することはありません。私のhtmlを追加

EDIT - >

<!DOCTYPE html> 
    <html lang="en"> 
.. 
    <body> 
     <ul class="nav"> 
     <div class="logo">TELEDATA</div> 
     </ul> 
     <h2>The number one social media influencer network</h2> 
    </body> 
    </html>

出典

2017-01-30 swxft

現在の問題を再現するために必要なHTMLなども含めてください。そうでなければ、私たちはちょうどそれがどのように見えるか推測しています。 –

コメントありがとう、私はちょうど私のために働いていなかったhtml :) – swxft

私の問題の解決策が見つかりました。 h2タグをdivのクラスに変更しました

div { 
-webkit-background-size: contain no-repeat; 
-moz-background-size: contain no-repeat; 
-o-background-size: contain no-repeat; 
background-size: contain no-repeat; 
} 

.h2 { 
    position: absolute; 
    margin: 80px; 
    left: 22px; 
    width: 750px; 
    height: 45px; 
    font-size: 85px; 
    font-family: 'Raleway', sans-serif; 
}

すべてがうまくいきました。あなたの提案にも上記の人のおかげで！

出典

2017-01-30 00:59:27 swxft

あなたがモバイルビューで、あなたのケースで@mediaqueries

を使用しているときH2要素にフォントサイズを小さくする必要がある、としてあなたのCSS &のhtmlを保ちますそれは、あなたのCSSファイルの末尾にこれを追加してください：

@media only screen and (min-width: 480px) and (max-width: 767px){ 
h2 { 
    font-size:12px; 
}

出典

2017-01-30 00:25:11 t0r

を追加しました、。さらに、テキストを段落の形にしたい。 – swxft

あなたはデスクトップ上でそれを表示している可能性があります。それは私のためにうまくいきます。「white-space：nowrap;」問題は私のiPhoneにあります、私は重複しています。 – swxft

私はこれについて他の記事を見てきましたが、私は解決策を試しましたが、私のために働いていません。 – swxft

モバイルウェブサイトのテキストの重複

答えて

関連する問題