Highlight text style not wrapping

Design help Layout & Design
1

Hi All.

I’m very new to Webflow. A colleague kindly set-up my website several months ago, and I’m now trying to update it and learn Webflow’s features on the go—not to mention web design in general.

I’d be grateful if somebody could help me with an issue I have concerning the ‘off-set highlight’ on my website. When I apply it to a set of words, the words get chunked together and don’t wrap elegantly to the next line, creating big gaps in the text. A good example of this is on the About page, when viewed as a narrow mobile screen.

Here is my site Read-Only: LINK

Is somebody able to help identify the issue?

Thank you in advance,
Chris

2 Likes
2

Hey Chris, unfortunately this is just kind of a natural issue with spans with custom styles being inside of paragraph elements. I quickly looked around in your read only link and tried to get some things working to no avail. I would recommend a few options:

1: Highlight shorter bunches of words - This will make the text wrap a bit better.

2: Highlight the desired long spans of text with a simple bold. Then it will wrap smoother.

3 Likes
3

Hey @csolarski ,

+1 to what @gagebarefield said.

The styling comes from the custom-styles embed in the Global Styles component that you have on the page as highlighted below:

AJ - Style
AJ - Style1509×736 77.4 KB

You can remove it and explore other ways of highlighting texts or see what design fits for your use-case while keeping the styling required.

2 Likes
4

@csolarski , Is this the result you’re trying to achieve?

Screenshot 2025-11-12 at 6.27.16 PM
Screenshot 2025-11-12 at 6.27.16 PM996×1392 207 KB

2 Likes
5

Hi All. Many thanks to all of you for reviewing the website. I suspected that it may be due to the offset effect, that this is happening. It may be that I must indeed simplify the Style. However, @ahmed_moeed your solution does indeed look correct. Was it an easy fix?

1 Like
6

@csolarski

Screenshot 2025-11-12 at 7.46.06 PM
Screenshot 2025-11-12 at 7.46.06 PM1920×996 339 KB

  1. Set the .offset-highlight class to display: inline.
  2. Apply the background color directly to the .offset-highlight class.
  3. Remove any highlight styling applied to the .offset-highlight::before pseudo-element.
2 Likes
7

Oh, wow. Thank you very much Ahmed! I don’t have time to look into it today but will start digging around tomorrow. Very much appreciated!

1 Like