Archived topic
overlapping text
7 replies · Started by sdanbu on May 16, 2017
This could be a simple fix but I use the html below and I have overlapping text issues when the screen gets too small.
<h1 style="font-size:300%; color:#ff0fff; line-height: 2.0">This is a heading</h1>
<p style="font-size:160%; color:#ff0fff;line-height: 0em">This is a paragraph.</p>
<p style="font-size:160%; color:#ff0fff;line-height: 1.0">This is a paragraph.</p>
<p style="font-size:160%; color:#ff0fff;line-height: 1.0">This is a paragraph.</p>
<p style="font-size:160%; color:#ff0fff;line-height: 0em">This is a paragraph.</p>
<p style="font-size:160%; color:#ff0fff;line-height: 0em">This is a paragraph.</p>
Some other sites say this is caused by 0em:
http://stackoverflow.com/questions/23984924/one-line-of-my-website-html-text-is-overlapping-in-mobile-browsers
How do I make the overlapping text stop and responsive to other screens.
Thanks
Any reason you've added line-heights to each paragraph? The 0em is definitely causing it.
I don't know how to make the text look like it is single spaced while also breaking up the text to chunks that can be responsive and left aligned when viewport shrinks.
<h1 style=”font-size:300%; color:#ff0fff; >This is a heading</h1>
<p style=”font-size:160%; color:#ff0fff;>This is a paragraph.</p>
<p style=”font-size:160%; color:#ff0fff;>This is a paragraph.</p>
<p style=”font-size:160%; color:#ff0fff;>This is a paragraph.</p>
<p style=”font-size:160%; color:#ff0fff;>This is a paragraph.</p>
<p style=”font-size:160%; color:#ff0fff;>This is a paragraph.</p>
Does this not work?
No it doesn't work because the spacing between each line is too big. Like the margins aren't right.
any link of where it is happening?
If you put that code in Try it editor https://www.w3schools.com/html/tryit.asp?filename=tryhtml_default
the spacing will be a lot wider.
Switching to 0em will more condensed, but resizing the viewport makes the text overlap
Weird thing is for me they act the same: https://i.imgur.com/2BhQ3ya.jpg
I tried it in firefox aswell as chrome.
How about adding this to the CSS:
p { margin: 0 !important; } You can play around with the margin i think
