Text is overlapping on itself.?

Community Forums Forums Design Tips and Tricks Text is overlapping on itself.?

This topic is: resolved

This topic contains 7 replies, has 2 voices, and was last updated by  photastic 1 year ago.

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

    JingDoc
    Participant
    Post count: 8

    When text on my site is longer than one line, the rest of the text overlaps onto the same line. See what I mean here How do I fix this?

    Thanks in advance for any help!

    #57666

    photastic
    Participant
    Post count: 74

    Looks like this is being caused by this part of css :

    .entry-content p {
    margin: 0 0 25px;
    line-height: 1px !important;
    }

    the line-height is only 1px makes the text overlap. adjust that part to for example :
    line-height; 1em !important
    and you’ll see the text jump :)


    Trying to craft webstuff at Photastic Webdesign
    Learning Genesis by solving unanswered topics

    #57708

    JingDoc
    Participant
    Post count: 8

    Thank you! I knew that was the problem text, but didn’t realize there were other options besides px (I’m a beginner if that wasn’t blatantly obvious). Now I’ve played around with several options for line height (em, %, etc.), but nothing changes the spacing between the text at the top (where I’ve hit enter after a line). Any tips for that?

    http://www.wittdc.com/about-dr-witt/

    #57709

    photastic
    Participant
    Post count: 74

    which text exactly do you mean? the one in the top right corner with the address and phone and so?


    Trying to craft webstuff at Photastic Webdesign
    Learning Genesis by solving unanswered topics

    #57724

    JingDoc
    Participant
    Post count: 8

    No, sorry. The entry text, like on this page: http://www.wittdc.com/about-dr-witt/. On my computer, it looks like the education section text is double spaced, and I can’t get it to change.

    #57727

    photastic
    Participant
    Post count: 74

    that’s because they are all in their own <p> tag (which isn’t bad by itself) but here too your css is causing the big spaces :

    .entry-content p {
    margin: 0 0 25px;
    }

    this line makes for a bottom margin of 25 pixels below every p you use in your .entry-content divs.
    or you remove that part of css or you lower the 25px to a smaller number to suite your taste :)


    Trying to craft webstuff at Photastic Webdesign
    Learning Genesis by solving unanswered topics

    #57737

    JingDoc
    Participant
    Post count: 8

    I never would have thought that margin was affecting that. Thank you for all your help!

    #57743

    photastic
    Participant
    Post count: 74

    you’re welcome :)

    If I may give some advice : change 1 thing at a time and then check back on your page to see what changed :)
    Don’t go changing 10 things because it’ll be harder to see what changed because of which css code :)

    If there’s anything else, just let us know :)


    Trying to craft webstuff at Photastic Webdesign
    Learning Genesis by solving unanswered topics

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.