Archived topic
Text not wrapping properly on mobile
4 replies · Started by Arie on February 25, 2022
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!
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;
}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?
Think I figured it out. Changing display: block; to display: inline-block; seems to have fixed the issue...
Glad you figured it out :)
