Maddeningly frustrating: ordered list numbers aligning to the bottom

Help me, Webflow Forum. You’re my only hope.

The problem: ordered list numbers are vertically aligning to the bottom, like this on 1, 3 and 5:

Screenshot 2020-08-28 at 11.54.13

Where it’s happening: currently only on this blog post when viewed on mobile (/when the text wraps). Because it’s inside a CMS element it’s not felt that straightforward to style it.

Other info:

  • This doesn’t seem to happen to OLs on ordinary non-CMS pages
  • It’s a CMS collection page where this is happening
  • I want to be able to link to H2s further down the page, custom code ordered list embed seems to be the only sensible way to do this

What I think might be happening: my hunch is that it’s inheriting some style from somewhere, but I’m lost in the weeds and can’t figure out where from.

What I’ve tried so far: changing everything I can think of on the ordered list class and going through (I think) every line of the inspector. I’ve got no idea what CSS property needs tweaking to address this.

The help I need: I’m hoping this will seem face-palmingly obvious to someone out there. Many, many thanks in advance to anyone who even takes the time to glance at this.

The embedded code if it’s helpful:

<ol role="list">
	<li> 
  	<a href="#history">How Did We Get Here? A Brief History of Shaving</a>
  </li>
  	<li> 
  	<a href="#benefits">The Benefits of Safety Razor Shaving</a>
  </li>
  	<li> 
  	<a href="#kit">Everything You Need to Start Shaving With a Safety Razor</a>
  </li>
  	<li> 
  	<a href="#howto">How to Shave With a Safety Razor</a>
  </li>
  	<li> 
  	<a href="#learnt">What I've Learnt After 32 Months of Safety Razor Shaving</a>
  </li>
</ol>

Here is my site Read-Only: Webflow - Will Patrick

1 Like

I have the same issue, ugh! Have you found a solution?