Scaling Text in Welcome Section – Headings and button text

[besembek]

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

[Hans (Support Admin)]

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

[besembek]

This reply has been marked as private.

[Hans (Support Admin)]

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;
}
}

[besembek]

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

[Hans (Support Admin)]

Hi CJ,

Ok, I will check your email and respond there.

[Hans (Support Admin)]

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;
}
}

[besembek]

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!

[Hans (Support Admin)]

Hello CJ,

I responded to your email.

[besembek]

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