모바일 웹 사이트의 텍스트가 겹침

나는 이것이 단지 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 그 텍스트의 중복을 만든 상속 있었는지 확인했습니다. 본문 스타일에서 일부 코드를 제거하려고했지만 작동하지 않습니다. 나는 또한 왜 이런 일이 일어나는지에 관해서 많은 정보를 온라인에서 발견하지 못한다. 나는 사람들의 시간을 낭비하려는 것이 아니라 단지 도움이 필요하다. 미리 감사드립니다.

나는 모바일 사이트에 갈 때, 스타일은 꺼져 있지만, 내 아이폰으로 내 사이트를 볼 때 나는 겹쳐진 텍스트를 보지 못한다.

EDIT 내 HTML을 추가 ->

<!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도 포함해야합니다. 그렇지 않으면 우리는 단지 그것이 http://stackoverflow.com/help/mcve에 어떻게 보이는지에 대한 추측을하고 있습니다. –

코멘트를 주셔서 감사합니다. 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;이 없어도 나를 위해 잘 작동합니다. 문제는 내 아이폰에 있습니다. 나는 겹쳐지고 있습니다. – swxft

다른 게시물을 보았습니다. 해결책을 찾았지만 저에게 도움이되지 않습니다. – swxft

모바일 웹 사이트의 텍스트가 겹침

답변

관련 문제