- This topic has 4 replies, 2 voices, and was last updated 4 years, 1 month ago by
.
-
Posts
-
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!
Customer Support
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 line
display: 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;todisplay: inline-block;seems to have fixed the issue…Glad you figured it out 🙂
- You must be logged in to reply to this topic.
