[Support request] overlapping text

Home Forums Support overlapping text

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #318939
    sdanbu

    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

    GeneratePress 1.3.46
    #319030
    Tom
    Lead Developer
    Lead Developer

    Any reason you’ve added line-heights to each paragraph? The 0em is definitely causing it.

    #319100
    sdanbu

    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.

    #319153
    sjoerd89

    <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?

    #319979
    sdanbu

    No it doesn’t work because the spacing between each line is too big. Like the margins aren’t right.

    #319990
    sjoerd89

    any link of where it is happening?

    #320057
    sdanbu

    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

    #320507
    sjoerd89

    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

Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.