Overlapping text on mobile website

Question

I believe this is just a css issue. So I'll only show that code.

  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;
 }

From trying to figure out what the problem is, I tried to see what maybe the h2 and .logo were inheriting that made the text overlap. I tried removing some code from the body style but that didn't work. I also counldn't find much information online as to why this happens. I'm not trying to waste people's time, just need some help. Thank you in advance!

BTW, when I go to my mobile site, although the style is off, I don't get the overlapping text that I see when I look at my site on my iphone.

EDIT Adding my 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>

You need to include your HTML, too - or whatever is needed to replicate the current issue. Otherwise we're just taking guesses at how it would look http://stackoverflow.com/help/mcve — Michael Coker, Jan 30 '17 at 00:17

t0r · Answer 1 · 2017-01-30T01:10:14.160

1

You have to lower the font-size on the h2 element when in mobile view using @mediaqueries

In your case, keep your css & html as it is, add this to the end of your css file:

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

edited Jan 30 '17 at 01:10

answered Jan 30 '17 at 00:25

t0r

229
2
14

that didn't work for me, I still got the overlapping. Plus, I want the text to be in a paragraph form. – swxft Jan 30 '17 at 00:30
I think that may be because you're viewing it on a desktop. It works fine for me even without the `white-space: nowrap;` The problem is on my iphone, I'm getting overlapping. – swxft Jan 30 '17 at 00:37
I've seen other posts about this, I've tried their solutions but they're not working for me. – swxft Jan 30 '17 at 00:38
hmm, you know what helped. I made h2 a class of div. Now I don't see the overlapping anymore. – swxft Jan 30 '17 at 00:48
Updated my answer for your case, you don't have to remove the h2. – t0r Jan 30 '17 at 01:01

score 0 · Accepted Answer · answered Jan 30 '17 at 00:59

I found the solution to my problem. I changed the h2 tag into a class of the 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;
}

Everything is working fine now. Thanks to the guys above for your suggestions too!

Overlapping text on mobile website

2 Answers2