[Support request] Text not wrapping properly on mobile

[Arie]

Hello, just looking for some help as to why my headline text is not wrapping properly on mobile devices. Looks fine on desktop, just mobile is having an issue. Here is a screenshot:

https://www.notion.so/Wrapping-issue-GP-14f100b2388945df86378cb3159a8295

will include link to staging site below.

Thanks!

[Ying]

Hi Arie,

The background image you set for the highlighted text can’t cover all of the words on mobile as it wraps.

Try add this linedisplay: block; to your CSS:

.has-contrast-color {
    background-color: var(--contrast-hover);
    background-image: linear-gradient(45deg, var(--base), var(--contrast));
    background-size: 100%;
    -webkit-background-clip: text;
    -moz-background-clip: text;
    -webkit-text-fill-color: transparent;
    -moz-text-fill-color: transparent;
}

[Arie]

Hmm, that fixes it in one area but breaks it in another. Now the headline breaks like this on both desktop and mobile: https://www.notion.so/Wrapping-issue-GP-14f100b2388945df86378cb3159a8295

Any other suggestions? I’m not using an image for the background gradient, just colors, is there a way to expand them to fit?

[Arie]

Think I figured it out. Changing display: block; to display: inline-block; seems to have fixed the issue…

[Ying]

Glad you figured it out 🙂

[Author]

Posts