Home / Forums / You Theme Support / Last letter of TypeWriter H1 SuperSize Text falls off

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts

  • adsights
    Participant

    Hi,

    In my header I’ve included the Acoda TypeWriter. Now sometimes the last letter of the word ‘Onafhankelijk’ falls off and is displayed right beneath the first letter of the second line. Could you please tell me how to make sure the TypeWriter text stays in one line? You can check out the header of my homepage https://www.adsights.nl to see what I mean.

    Thanks in advance.

    Marnix

    Hi @adsights

    For the text overflow, since the text is very long, the easiest workaround for that is to use a smaller font size. In that way, it will fit in 1 line instead of overflowing.

    Regards,


    adsights
    Participant

    Problem is, it doesn’t have to do with the font-size. You clearly see the text beneath it is longer. Besides that, the text (‘Onafhankelijk’) is only 13 characters. Could you please tell me if there’s another work around? I’d really like to implement this, as it’s a crucial part of my pagedesign.

    Hi @adsights

    No word under “Onafhankelijk” is actually longer than it.

    Anyway, another option we can do is increase the size of the block for the typewriter text cause it looks like you have specified a width to it.

    Can you please send over your site’s login credentials?

    Regards,


    Pcu2
    Participant

    Hi,

    I am having the same issues with typewriter. Sometimes the last letter falls off.

    It’s happening on mobile with words as short as 6 characters.

    Could you please help me with this?

    Thanks,
    Paul

    Hi @pcu2

    Can you send over your site’s URL and login credentials so we can check further on this?

    Regards,


    Pcu2
    Participant
    This reply has been marked as private.

    Please copy this CSS and paste it into Appearance > Theme Options > Custom CSS:

    @media only screen and (min-device-width: 320px){
    .acoda-writer-wrap .format {
        font-size: 3em;
    }
    }

    This will decrease the font of the text, to match the same size as the other text and so it doesn’t break as well.

    If that does not work for you, just send over the credentials and send your reply as ‘private’ so we are the only ones that sees it.

    Thanks!


    Pcu2
    Participant

    I entered this code into Appearance > Theme Options > Custom CSS (Custom CSS). It made the text too small on desktop but fixed the mobile.

    Then I entered the code into Appearance > Theme Options > Custom CSS (Mobile CSS). The mobile is working and the text remains large on the desktop.

    However, when I resized the browser, the text fell off on desktop.

    Do you have some code I could put in that keeps the large text on the desktop version?

    Thanks so much for your help!


    Pcu2
    Participant
    This reply has been marked as private.

    I have applied the correct CSS to your theme and the issue should be fixed now.

    Please check if everything looks good from your end.

    Regards,

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

You must be logged in to reply to this topic.