Scaling Text in Welcome Section – Headings and button text

  • Hi,

    I’m struggling with scaling text in the Welcome Section. All appear fine in browser but words break on mobile and even if I change the font to a ridiculously small size problem still is the same. I can set display settings on mobile to SMALL but any Normal settings or large display settings on mobile result in broken words, and overflow of button text not managed.

    Any suggestions?

    Thanks, CJ

    Hi CJ,

    Can you send me a link to your site so I can have a look?

    Also, you may want to look at the text-overflow CSS properties,

    text-overflow

    This reply has been marked as private.

    Hello,

    In your Admin Dashboard navigate to Integral Options panel > Custom Code section and enter the following CSS code into the Custom CSS field.

    @media (max-width: 767px) {
    .hero .btn {
    font-size: 3vw;
    }
    }

    Thank you for this, Hans – This resolved the second part of the issue (the buttons).
    Unfortunately, the text is still a problem. I mailed you some screenshots to try and explain.

    Kind regards,

    CJ

    Hi CJ,

    Ok, I will check your email and respond there.

    Hi CJ,

    Doesn’t look like I received an email from you.

    Can you send to [email protected]?

    If the buttons still stock outside the frame you can try reducing the size of the text even more.

    Try,

    @media (max-width: 767px) {
    .hero .btn {
    font-size: 2vw;
    }
    }

    Hi Hans.

    The buttons are fine now, and so is the text inside the buttons. It is the text of Title line 1 that is the major issue at the moment. I e-mailed again.

    Thanks a mil!

    Hello CJ,

    I responded to your email.

    Thank you, Hans.

    All sorted now. Thank you for your help and quick response.
    I will let you know if there is anything else but all good for now.

    Kind regards,
    CJ

You must be logged in to reply to this topic.